用图像填充整个div，而不考虑图像大小不工作。
用图像填充整个div，而不考虑图像大小不工作。
提问于 2015-07-09 21:20:43
我试图用图像填充整个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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-09 21:31:20
从您的问题中，不清楚您是试图使用背景图像还是img元素来填充div。
如果您想使用img元素填充div，那么您已经发布的代码将为您完成这一任务。您只需要在div中放置一个img元素，例如：
<div><img src="http://placehold.it/250x250" /></div>如果要扩展图像以填充div，将其用作背景图像，只需将值cover添加到背景尺寸属性：
background-size:cover;img元素的JSFiddle
背景图像的JSFiddle
Stack Overflow用户
发布于 2015-07-09 21:34:39
<img>标记是一个html元素，与该<div>的背景图像无关。
正如APAD1正确指出的那样，强制背景图像填充html元素的正确方法是使用background-size。
background-size: contain填充元素，直到背景图像触及其容器的第一边缘(保持高宽比)。background-size: cover完全填充元素，同时保持图像的高宽比。background-size: 100% 100%完全填充元素，以便背景图像接触到元素的所有侧面的边缘(从而潜在地扭曲图像)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31328435
复制相关文章
相似问题
腾讯云开发者
