image - 带有img标签的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; }

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

score 37 · Accepted Answer

问题是图像的自然样式在底部有一点边距，至少可以说是丑陋的。一个简单的解决方法是只显示：块，浮动：在图像上留下，空间应该消失。

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

所以最终会变成这样

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

希望有帮助。

score 7 · Accepted Answer

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

img {
  vertical-align:middle;
}

score 6 · Accepted Answer

6

使用 img: 块。就这样....

于 2013-11-14T09:40:06.450 回答

score 2 · Accepted Answer

要div使其元素与其子img元素相同：

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

div img {
    margin: 0;
}

不过，我建议您使用 aspan而不是 a div（这样它会自动将其宽度“折叠”到其内容的宽度：

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

score 0 · Accepted Answer

您是在谈论仅设置 Div 的大小吗？在 CSS 中：

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

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

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

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

score 0 · Accepted Answer

0

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

div {
    display: flex;
}

于 2017-11-03T19:37:11.563 回答

6 回答 6