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

问题是图像的自然造型在底部有一点点边缘，至少可以说是难看。一个简单的方法是只显示：block，float：在图像上留下，空间应该消失。

如果您真的不想漂浮它，那么你可以在图像上使用边框折叠来玩游戏。但是，这是一个可能最终会导致更多问题的解决方案。

所以它最终会像

那样

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

希望有所帮助。

Answer 2

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

img {
  vertical-align:middle;
}

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

Answer 3

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

Answer 4

让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 5

您是在谈论设定Div的大小吗？ 在css：

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

你也不能在你的代码中设置图像，而是将“box”的DIV背景图像设置为该图像：

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

（10px只是一个随机数的课程。将它设置为你需要的任何大小）

Answer 6

有效的简单现代解决方案如下

div {
    display: flex;
}