Falsche Höhe des DIV Bild Wrapper mit prozentualen Breite Werte

Question

Ich möchte ein Bild in eine HTML DIV und, da ich dies mit der Größe des Fensters skalierbar sein möchte, möchte ich die Breite der DIV in Prozentsatz wie folgt:

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%; 
} 

Das Bild sollte die Höhe seines Behälters bestimmen. Dies liegt daran, dass die Bildbreite auf 100% eingestellt ist und die Bildhöhe entsprechend berechnet wird, wobei das korrekte Seitenverhältnis beibehalten wird.

Das Ergebnis ist sichtbar auf jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

Meine Fragen sind:

1. Warum alle modernen Browser den Wrapper DIV 5px größer als das innere Bild machen?
2. Wie kann ich diese 5px Lücke loswerden, während immer noch alle Größen in Prozent und ohne mit Javascript?

Überraschenderweise passiert dies in Chrom (21.0.1180.89), Firefox (15.0.1) und IE8, während IE7 es richtig macht, mit der Höhe des Bildes, die Höhe der DIV entspricht.

Answer 1

OK, um das Hantieren, fand ich eine gute mögliche Lösung:

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

}

aus dem Standard Ändern inline Anzeige auf einen block Anzeige beseitigt die line-height Problem sofort.

Dieser Ansatz ist auch semantisch richtig, weil in diesem Fall, was wir wirklich wollen, ist ein einziges in einem DIV gewickeltes Bild ohne andere Elemente in ihr, so das Konzept der line-height Bedürfnisse vollständig durch Anzeigen das Bildes abgewischt werden als ein Block.

Es funktioniert auf allen gängigen Browsern: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

Ich denke, Sie shuold set align Eigenschaft zu erzwingen Browser zeigt korrekt img-Tag.

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

DEMO

Answer 3

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

Hallo jetzt vertical-align:top in Ihrem img tag throw css hinzufügen

als ähnliche

#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/

Es ist ein line-height Problem :-)

Sie benötigen:

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

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

I-Box-Sizing verwendet, um sicher die Breite des Bildes macht nicht überläuft den Behälter

Answer 5

Ich denke, weil es nicht als Tabelle

Ich habe die Anzeige: Tabelle in Ihrem Code

Und es sieht jetzt gut,

die Verbindung überprüft

Example Display Table

Answer 6

Ihr Problem ist, dass ein Bild - der <img>-Tag, um genau zu sein - ist ein Inline-Element. Alles, was Sie tun müssen, ist display: block auf dem Bild und die zusätzliche Polsterung geht weg. Demo.