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: 块。就这样....

Answer 3

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

img {
  vertical-align:middle;
}

Answer 4

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

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

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

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

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