无论图像高宽比如何，背景图像都填充div。
无论图像高宽比如何，背景图像都填充div。
提问于 2015-08-06 14:37:24
我想知道如何用图像填充div的背景。无论图像的高宽比(景观或肖像)如何。我试着用几种方法。在background-size: cover;到background-size: 100% 100%;上，它并不总是填充div。div有一个景观宽度/高度比，图像有一个随机比率。如果我尝试background-size: cover;，风景将填补整个背景，但肖像的那些不会(他们在左边和右边的缺口)。
编辑：
div {
background: url(img.png) no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-06 15:13:49
background-size:cover;应该能满足您的需要。基本上，cover值将导致背景图像完全填充div，而不考虑div的方向或大小，同时保持图像的高宽比。对此解决方案的一个警告是，图像将被裁剪，因为它必须伸展以填充div。
有关背景大小属性的更多信息。
Stack Overflow用户
发布于 2015-08-06 14:44:12
你可以试试这个
div {
background: url(img.png) no-repeat center center;
background-size: contain; /*i think its better to use contain if you;re using a large png*/
height: 100vh!important;
width: 100hw!important;
overflow:visible;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31858653
复制相关文章
相似问题
腾讯云开发者
