Percentuale altezza CSS non ridimensiona immagine

Sto provando a creare la parte superiore di un sito Web per contenere un logo a sinistra e una barra di spostamento a destra. L'immagine è grande perché mi è stato detto che potrebbe essere utilizzata su un HDTV e volevo che si adattasse bene. Ho pensato che se avessi inserito il logo e una barra di navigazione nello stesso div avrei potuto applicare una percentuale all'altezza in modo che fosse sempre il 10% superiore dello schermo ma non si adattava al mio codice, rimane solo il stessa dimensione dell'immagine Qualsiasi aiuto sarebbe molto apprezzato.Percentuale altezza CSS non ridimensiona immagine

<body> 
<div id="container"> 
    <div id="top"> 
    <img src="images/logo.png" alt="logo"> 
    <ul> 
    <li><a href="#" title="1">1</a></li> 
    <li><a href="#" title="2">2</a></li> 
    <li><a href="#" title="3">3</a></li> 
    <li><a href="#" title="4">4</a></li> 
    <li><a href="#" title="5">5</a></li> 
    </ul> 
    </div> 
</div>

E questo è il im CSS utilizzando

#top { 
height: 10%; 
width: 100% 
}

Vorrei davvero apprezzare l'aiuto di nessuno.

fonte

2013-02-21 user2093601

Se si sta tentando di ridimensionare l'immagine stessa, è necessario indirizzare l'immagine nel CSS.

Si consiglia inoltre di impostare un limite minimo (e possibilmente massimo) per il ridimensionamento. C'è un punto in cui rimpicciolirsi sembrerà cattivo e diventa inutilizzabile.

html, body, #container { 
    height: 100%; 
    width: 100%; 
} 

#top { 
    height: 10%; 
    width: 100%; 
    min-height: 23px; 
} 

#top img { 
    height: 100%; 
    width: auto; 
    min-height: 23px; 
    min-width: 136px; 
}

jsfiddle

fonte

2013-02-21 01:36:17

che sembra in realtà per renderlo più grande, ma almeno ridimensionato. Qualche altra idea? – user2093601

@ user2093601 L'immagine viene ridimensionata all'interno del frame del 10% nel mio [esempio jsfiddle] (http://jsfiddle.net/JvgtX/show/). Che cosa esattamente non funziona? –

Mi spiace che il codice di esempio in StackOverflow abbia mostrato altezza img: 100% non 10%. Il tuo diritto però, l'esempio di JS Fiddle funziona con l'altezza del 10% applicata all'elemento img. Non dovrebbe l'elemento img assumere la proprietà del div top superiore e regolare? Vale a dire perché non sarei in grado di rendere il 'div' top 'contenente il 10% e che l'img erediti quella proprietà size? – user2093601

è necessario dare l'immagine un'altezza di 10% in modo che sappia in scala con il div. Credo che funzionerà se lo fai.

#top img { 
    height: 10%; 
}

Edit: jsFiddle

fonte

2013-02-21 01:40:40

Questo lo rende scalabile. Non dovrebbe l'immagine ereditare la proprietà della div così potrei assegnarla al 100%? – user2093601

È flottato così il '# top' è in realtà vuoto (altezza: 0px) mentre float prende gli elementi fuori dal flusso normale. –

Si presume che si voglia far fluttuare il contenuto di '# top', ovviamente. –

Percentuale altezza CSS non ridimensiona immagine

risposta

Problemi correlati