Question

我已经在css上工作了一段时间，但我很困惑为什么父高度与内部图像高度不同，给出以下代码。

<div style="width:200px">
    <img style="max-width:100%;" src="http://localhost:8888/example/06f1e47fbdb03e48203ebfba/66932afa697bdbc76a1a291e/thumb_d90ab4a531969620e2c2a160.jpg">
</div>

我原以为父div会相应地扩展不同的图像。事实是内部图像是200 * 200，外部div是200 * 206，我不知道额外的6个像素来自哪里。 内部图像的外部div或边距有填充。有人能解释为什么会这样吗？

Answer 1

this能解决您的问题吗？如果没有，您使用的浏览器和操作系统是什么？

我之前遇到过这种情况。问题是默认情况下，图像为display: inline-block，这使得它们的行为类似于文本（例如，在文本基线之后）。如果我们不希望这种情况发生，我们可以将显示更改为display: block。

Answer 2

有人可以解释为什么会这样吗？

因为图片是替换的内联元素，因此它默认在同一行的潜在文本内容的基线上对齐。

如另一个答案中已经提到的那样block，或者为其指定vertical-align:bottom会改变它。

Answer 3

使用display: block;

div {
  width:200px
}

img {
  max-width:100%;
  display: block;
}

<div>
    <img src="http://cadizinc.com/wp-content/uploads/2011/11/water_07-610x370.jpg">
</div>

为什么父高不相同是内部图像高度？

3 个答案: