html - 无论图像大小如何，都用图像填充整个 div 不起作用

Question

我试图用图像填充整个 div，不管图像的大小如何，但由于某种原因，图像的大小只有默认大小。它不会自动拉伸(stretch)以适应 div 的大小。我尝试将图像的宽度和高度设置为 100%，认为它会以这种方式适合 div，但图像仍保持其默认大小。有没有一种方法可以自动拉伸(stretch)图像以填充 div，而无需手动测试和更改每个图像？

<style>

div {
    border: 1px solid red;
    width: 1000px;
    height: 1000px;
    background-image: url("side.jpg");
    background-repeat: no-repeat;
}

img {
    width: 100%;
    height: 100%;
}

</style>

<div> </div>

Answer 1

从你的问题来看，不清楚你是想使用背景图片还是 img元素填充 div。

如果您想使用 img 元素填充 div，您发布的代码已经为您完成了。你只需要在 div 中放置一个 img 元素，例如:

<div><img src="http://placehold.it/250x250" /></div>

如果您想拉伸(stretch)图像以填充 div 并将其用作背景图像，您只需将值 cover 添加到 background-size属性:

background-size:cover;

JSFiddle for img element

JSFiddle for background image