如何让 img 标签填充它的父节点？

Question

现在我有这个：

.image-container {
margin: 10px auto !important;
width: 300px;
background: red;
}
img {
max-width: 100%;
}

<figure class="image-container">
<img src="https://lasenhorita.github.io/assets/images/hero/low/HERO_SADNESS_H_0001.jpg">
</figure>

在img(图像尺寸：800x520(标签下，有一个我不知道如何删除的空间。

谁能帮忙？

Answer 1

默认情况下，图像是内联级别元素(显示：内联块(。所有内联级别元素在所有方向 (4px( 上都有一些额外的默认间距。这就是为什么你在那里有这个空间。

您需要做的就是将图像设置为display:block.

不过，您可以在整个stackoverflow中找到相同的问题，因此如果可能的话，请尝试先搜索一下。

例如：删除图像下方的空白区域

编辑：错别字

Answer 2

将display:flex添加到.image-container

.image-container {
display: flex;
margin: 10px auto !important;
width: 300px;
background: red;
}
img {
max-width: 100%;
}

<figure class="image-container">
<img src="https://lasenhorita.github.io/assets/images/hero/low/HERO_SADNESS_H_0001.jpg">
</figure>