带有图片标签的div高度错误

Question

我有一个div包含一张图片，但是这个div的高度比图片略高。

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

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

以下是场景：

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

Css是：

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

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

- user1403825

Answer 1

问题在于图片的自然样式会在底部产生一点边距，这让它看起来相当难看。一个简单的解决方法是在图片上应用"display: block, float: left"，这样空间就会消失。

或者，如果你真的不想浮动图片，可以尝试调整图片的边框折叠(border-collapsing)。但是，这可能会在最终导致更多问题。

所以最终代码可能会类似于：

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

希望能帮到你。

- Brodie

---

太好了！它只适用于display:block！非常感谢。 - user1403825

图片添加"display:block"解决问题！实际原因是图片有默认的CSS样式"vertical-align: baseline"。所以我们也可以通过给图片添加"vertical-align: top"来解决问题。 - undefined

Answer 2

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

img {
  vertical-align:middle;
}

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

- Konstantin Barabator

Answer 3

使用img: block即可，就是这样简单。

- user2957214

Answer 4

为了让

元素与其子元素相同：

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

div img {
    margin: 0;
}

我建议您使用 span 而不是 div （这样它的宽度将自动“折叠”为其内容的宽度）：

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

JS Fiddle概念验证（适用于两种）。

- David Thomas

Answer 5

现代简单的解决方案如下

div {
    display: flex;
}

- madhu131313

Answer 6

你是在说只是设置 Div 的大小吗？ 在 CSS 中：

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

你也可以不在代码中设置图片，而是将“盒子”的 DIV 背景图像设置为该图片：

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

（10px只是一个随机数字，根据您的需要设置任何大小）

- InspiredBy

---

我正在开发一个响应式布局，因此我不会为div设置特定的高度；这样当浏览器窗口大小调整时，div就会自动缩放。 - user1403825