img适合div

Question

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

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

您认为最好使用img或background-image吗？

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

Answer 1

你可以试试这样的事情

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

使用背景图片，您将无法将图像调整为div标签的精确尺寸。

Answer 2

就个人而言，如果您要以这种方式修改内容，我认为使用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;
}