div的高度与img标签里面

Question

我有一个div的图像标签里面，div高度似乎比图像稍大。

我可以通过为div设置特定的高度（与图像相同）来解决此问题，但我正在使用响应式布局，并且我不想为div设置特定高度，所以当浏览器窗口缩放时（例如在移动设备中），div会缩放并保持比例。

我需要div高度与图像高度完全一致。

这是情景：

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

CSS是：

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

有谁知道如何解决这个问题？

Answer 1

你说的是刚刚设置Div的大小？ 在CSS：

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

你也不能设置在你的代码的形象，但“框的” DIV背景图片设置为图像，而不是：

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

（10px的只是一个随机数ofcourse ，将其设置为任何你需要的大小）

Answer 2

要让div是作为其子img元素相同的元素：

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

div img { 
    margin: 0; 
} 

我建议，虽然，你使用span而不是div（这样，它会自动“崩溃”的宽度到其内容会：

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

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

Answer 3

问题是，图像的自然造型给了它底部的一点保证金，至少可以说是丑陋的。一个简单的解决方法就是在图像上显示：block，float：left，空间应该消失。

无论是或者如果你真的不想浮动它，你可以在图像上边界折叠玩耍。但是，这是一个可能会导致更多问题的解决方案。

所以它会最终被类似

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

希望帮助。

Answer 4

使用img：block。这就是全部......

Answer 5

最简单的方法是确定图像的垂直对齐。

img { 
    vertical-align:middle; 
} 

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

Answer 6

的作品是如下

div { 
    display: flex; 
}