带有img标签的div的高度错误 [英] Wrong height of div with img tag inside

问题描述

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

I have a div with an image tag inside, and the div height appears to be a little larger than the image.

我可以通过设置一个div的特定高度（与图像相同），但我使用响应式布局，我不想为div设置特定高度，以便在浏览器窗口缩放时（例如在移动设备中）

I could fix this problem by setting a specific height for the div (the same as the image), but I'm working with a responsive layout, and I don't want to set a specific height for the div, so that when the browser window scales (for example in mobile devices) the div will scale and maintain the ratio.

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

I need that the div height to be exactly as the image height.

这是场景：

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

Css是：

img {
height：auto;
max-width：100％;
width：auto;
}

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

Does anybody know how to fix this problem?

推荐答案

问题是，图像的自然造型给它一点边缘底部，使它丑陋至少说。一个简单的解决方法是只显示：block，float：left on the image and the space should be away。

The problem is that the image's natural styling gives it a little bit of margin on the bottom making it ugly to say the least. An easy fix is to just display: block, float: left on the image and the space should go away.

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

either that or you can play around w/ the border-collapsing on the image if you really don't want to float it. However, that's a solution that would probably cause more problems in the end.

，所以它最终会是像

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

希望有帮助。

这篇关于带有img标签的div的高度错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！