适合 div 的 img

Question

我想要一个自动适合 div 大小的背景图像。

我有几个同一类的 div，每个都有不同的尺寸，是否可以将图像的宽度和高度精确设置为 div 的尺寸？

您认为使用 img 还是 background-image 更好？

PS我不知道是否可以设置背景图像的尺寸，当然对于标签img来说是可能的，但是如果我使用标签img，图像将与内容分离（它不会作为一个重叠）背景）

Answer 1

就个人而言，如果您要以这种方式修改内容，我认为使用 img 更好。

如果你想要的话，你可以直接设置 div 的高度和宽度。

<div class="box"><img src="Path/to/image.png"/></div>

然后 CSS 会是这样的：

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

.box img {
     height: 300px;
     width: 300px;
}

无论如何，这是一种方法。您还可以将其设置为高度为 div 大小的 100%，但宽度设置为 auto，以便它随之缩放。这样图像就不会变形。像这样：

.box img {
     height: 300px;
     width: auto;
}

Answer 2

您可以尝试这样的操作：

<div style="width:200px;height:200px">
    <img src="image.png" width="100%" height="100%"/>
</div>

对于背景图像，您将无法将图像大小调整为 div 标签的确切尺寸。