Altezza errata di div con tag img all'interno

Question

Ho un div con un tag immagine all'interno e l'altezza div sembra essere un po 'più grande dell'immagine.

Potrei risolvere questo problema impostando un'altezza specifica per il div (lo stesso dell'immagine), ma sto lavorando con un layout reattivo, e non voglio impostare un'altezza specifica per il div, in modo che quando la finestra del browser si ridimensiona (ad esempio nei dispositivi mobili) il div ridimensiona e mantiene il rapporto.

Ho bisogno che l'altezza div sia esattamente come l'altezza dell'immagine.

questo è lo scenario:

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

Css è:

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

Qualcuno sa come risolvere questo problema?

Answer 1

Stai parlando solo impostare la dimensione della Div? In css:

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

È possibile, inoltre, non impostare l'immagine nel codice, ma impostare un'immagine di sfondo DIV del "box" a quell'immagine, invece:

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

(10px è solo un numero casuale naturalmente . Impostare a qualsiasi dimensione avete bisogno)

Answer 2

per avere la div essere lo stesso elemento come il suo elemento figlio img:

div { 
    display: inline-block; 
    padding: 0; 
} 

div img { 
    margin: 0; 
} 

Io suggerirei, però, che si utilizza un span invece di una (in questo modo div che sarà automaticamente 'crollo' la sua larghezza a quella del suo contenuto:

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

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

Answer 3

Il problema è che lo stile naturale della immagine dà un po 'di margine sul fondo che lo rende brutto a dir poco. Una semplice soluzione è semplicemente visualizzare: blocco, float: a sinistra sull'immagine e lo spazio dovrebbe andare via.

uno che o si può giocare w/il confine-collasso sull'immagine se davvero non si vuole galleggiare. Tuttavia, questa è una soluzione che probabilmente causerà più problemi alla fine.

modo da sta andando a finire per essere qualcosa di simile

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

speranza che aiuta.

Answer 4

utilizzo img: block. questo è tutto ....

Answer 5

Il modo più semplice è determinare l'allineamento verticale dell'immagine.

img { 
    vertical-align:middle; 
} 

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

Answer 6

La soluzione semplice e moderno, che funziona è la seguente

div { 
    display: flex; 
}