Question

我试图用图像填充整个div，无论图像的大小如何，但由于某种原因，图像只有默认大小。它不会自动拉伸以适合div的大小。我尝试将图像的宽度和高度设置为100％，认为它适合div那样，但图像仍然保持默认大小。有没有办法自动拉伸图像以填充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>

如果您想要使用它作为背景图像来拉伸图像以填充div，则只需将值cover添加到background-size属性：

background-size:cover;

JSFiddle for img element

JSFiddle for background image

Answer 2

<img>标记是一个html元素，与<div>的背景图片无关。

正如APAD1正确指出的那样，强制背景图像填充html元素的正确方法是使用background-size。

background-size: contain填充元素，直到背景图像接触其容器的第一个边缘（保持纵横比）。
background-size: cover在保持图像宽高比的同时完全填充元素。
background-size: 100% 100%完全填充元素，使背景图像在所有方面都接触到元素的边缘（因此可能会扭曲图像）。

无论图像大小不起作用，都要用图像填充整个div

2 个答案: