Falsche Höhe von Div mit Img-Tag innerhalb

Question

Ich habe ein Div mit einem Bild-Tag im Inneren, und die div-Höhe scheint ein wenig größer als das Bild.

Ich könnte dieses Problem beheben, indem ich eine bestimmte Höhe für das div (das gleiche wie das Bild), aber ich arbeite mit einem responsiven Layout, und ich möchte nicht eine bestimmte Höhe für das div festlegen, Wenn das Browserfenster skaliert wird (z. B. in mobilen Geräten), skaliert das div und behält das Verhältnis bei.

Ich brauche, dass die div Höhe genau wie die Bildhöhe sein.

Dies ist das Szenario:

<div class='box'><img src='image.jpg'></div>

Css ist:

img { height: auto; max-width: 100%; width: auto; }

Weiß jemand, wie man dieses Problem zu beheben?

Answer 1

Sprechen Sie über nur die Größe der Div Einstellung? in CSS:

.box 
{ 
height: 10px; 
width:10px; 
} 

Sie können auch nicht das Bild in Ihrem Code festgelegt, sondern setzen Sie das stattdessen zu diesem Bild DIV Hintergrundbild "Loge":

.box 
{ 
height: 10px; 
width:10px; 
background:url('/imgURL/filename.gif') white no-repeat; 
} 

(10px ist nur eine Zufallszahl ofcourse Stellen Sie es auf, was Größe Sie benötigen)

Answer 2

Damit die div das gleiche Element sein wie sein Kind img Element.

obwohl 210

Ich würde vorschlagen, dass Sie eine span anstelle eines div verwenden (diese Weise werde es automatisch ‚Zusammenbruch‘ seine Breite derjenigen seines Inhalts:

span { 
    padding: 0; 
} 
span img { 
    margin: 0; 
} 

JS Fiddle proof-of-concept (for both).

Answer 3

Das Problem ist, dass das natürliche Styling des Bildes es ein wenig Rand auf der Unterseite gibt, die es hässlich macht, gelinde zu sagen. Eine einfache Lösung ist, nur anzuzeigen: Block, Float: links auf dem Bild und der Raum sollte weggehen.

entweder das oder Sie können mit dem Rand-Kollaps auf dem Bild herumspielen, wenn Sie es wirklich nicht schweben möchten. Dies ist jedoch eine Lösung, die am Ende wahrscheinlich mehr Probleme verursachen würde.

so ist so etwas wie

.box img { 
    display: block; /*inline block would be fine too*/ 
    float: left; 
} 

Hoffnung, am Ende, es wird das hilft.

Answer 4

Verwendung img: Block. das ist alles ....

Answer 5

Der einfachste Weg ist, die vertikale Ausrichtung des Bildes zu bestimmen.

img { 
    vertical-align:middle; 
} 

http://jsbin.com/xozatu/edit?html,css,output

Answer 6

Die einfache moderne Lösung, die

div { 
    display: flex; 
}