Altezza errata del wrapper immagine DIV con valori di larghezza percentuale

Question

Desidero avvolgere un'immagine in un codice HTML DIV e, poiché desidero che sia completamente scalabile con le dimensioni della finestra, desidero impostare la larghezza dello DIV in percentuale come segue:

html

<div id="wrapper"> 
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" /> 
</div> 

css

#wrapper { 
    position: absolute; 
    width: 50%; 
} 

#wrapper img { 
    width: 100%; 
} 

L'immagine dovrebbe determinare l'altezza del suo contenitore. Questo perché la larghezza dell'immagine è impostata al 100% e l'altezza dell'immagine viene calcolata di conseguenza mantenendo le proporzioni corrette.

Il risultato è visibile sul jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

Le mie domande sono:

1. Perché tutti i browser moderni rendono l'involucro DIV 5px più alto l'immagine interiore?
2. Come posso liberarmi di questo gap 5px, mentre sto ancora impostando tutte le dimensioni in percentuale e senza utilizzando javascript?

Sorprendentemente, questo avviene in Chrome (21.0.1180.89), Firefox (15.0.1) e IE8, mentre IE7 rende correttamente, corrispondente all'altezza del DIV con l'altezza dell'immagine.

Answer 1

OK, armeggiare, ho trovato una buona soluzione possibile:

#wrapper img { 
    display: block; 
    width: 100%; 
    border: 1px dashed red; 

}

Modifica dalla visualizzazione standard inline ad un display block elimina il problema line-height immediamente.

Questo approccio è anche semanticamente corretto perché in questo caso ciò che realmente vogliamo è una singola immagine avvolto in un DIV senza altri elementi in esso, in modo che il concetto di line-height deve essere completamente spazzati via da visualizzare l'immagine come un blocco.

Funziona su tutti i principali browser: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

Penso che tu abbia shuold impostato allinea la proprietà per forzare il browser mostra correttamente il tag img.

<div id="wrapper"> 
    <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /> 
</div> 

DEMO

Answer 3

................

Hi ora aggiungere vertical-align:top nel vostro img tag tiro css

come come questo

#wrapper img { 
    width: 100%; 
    border: 1px dashed red; 
    vertical-align:top; // add this line 
} 

live demo

Answer 4

Check this out:

http://jsfiddle.net/5BN4g/29/

E 'un problema di line-height :-)

È necessario:

#wrapper { 
    width: 60%; 
    background-color: #aaa; 
    margin: 50px auto; 
    line-height:0; 
} 

#wrapper img { 
    width:100%; 
    border: 1px dashed red; 
    box-sizing:border-box; 
} 
​ 

ho usato box-dimensionamento per assicurarsi che la larghezza dell'immagine non traboccare il contenitore

Answer 5

Penso che sia perché non si vede come una tabella

ho aggiunto il display: tabella nel codice

E sembra bene ora, controlla il link

Example Display Table

Answer 6

Il tuo problema è che l'immagine - il tag <img>, per l'esattezza - è un elemento inline. Tutto quello che devi fare è impostare display: block sull'immagine e il riempimento extra va via. Demo.