css - 适合 div 的 img

Question

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

我有几个相同类别的 div，每个都有不同的尺寸，是否可以将图像的宽度和高度设置为与 div 的尺寸完全一致？

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

P.S 我不知道是否可以设置背景图片的尺寸，标签 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%，但宽度设置为自动，以便它随它缩放。这样图像就不会失真。像这样:

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