altura incorrecta de div con la etiqueta img dentro de

Question

Tengo un div con una etiqueta de imagen en el interior, y la altura de div parece ser un poco más grande que la imagen.

Podría solucionar este problema estableciendo una altura específica para el div (lo mismo que la imagen), pero estoy trabajando con un diseño receptivo, y no quiero establecer una altura específica para el div, de modo que cuando se escale la ventana del navegador (por ejemplo, en dispositivos móviles), el div escalará y mantendrá la relación.

Necesito que la altura div sea exactamente igual a la altura de la imagen.

Este es el escenario:

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

Css es:

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

¿Alguien sabe cómo solucionar este problema?

Answer 1

que estas hablando sencillamente en ajustar el tamaño de la Div? En CSS:

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

Puede también no fijar la imagen en su código, sino establecer una imagen de fondo DIV del "cuadro" de esa imagen en su lugar:

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

(10px es sólo un número al azar por supuesto . Ajuste a cualquier tamaño que necesita)

Answer 2

para que el div ser el mismo elemento como su elemento secundario img:

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

div img { 
    margin: 0; 
} 

me gustaría sugerir, sin embargo, que utiliza un span en lugar de una (de esa manera div que va automáticamente 'colapso' de su anchura a la de su contenido:

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

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

Answer 3

El problema es que el estilo natural de la imagen le da un poco de margen en la parte inferior haciéndolo feo para decir lo menos. Una solución sencilla es simplemente mostrar: bloquear, flotar: a la izquierda en la imagen y el espacio debería desaparecer.

ya sea eso o puede jugar con el colapso del borde en la imagen si realmente no desea flotarlo. Sin embargo, esa es una solución que probablemente cause más problemas al final.

así que va a llegar a ser algo así como

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

espero que ayude.

Answer 4

use img: block. eso es todo ...

Answer 5

La manera más fácil es determinar la alineación vertical de la imagen.

img { 
    vertical-align:middle; 
} 

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

Answer 6

La solución moderna simple que funciona es la siguiente

div { 
    display: flex; 
}