CSS：背景图像拉伸和挤压到 div 的 100% 区域，没有溢出没有重复答案

【问题标题】：CSS: Background image to stretch and squash to 100% area of div with no overflow no repeatCSS：背景图像拉伸和挤压到 div 的 100% 区域，没有溢出没有重复
【发布时间】：2017-07-28 11:05:30
【问题描述】：

我想要一个图形形状背景图像拉伸以适应响应式动态变化的 div（包含文本）的整个区域，而无需保留比例，以便图像保持 100% 的宽度和高度而没有任何溢出。

我尝试使用通常的背景大小设置为“覆盖”、“包含”和“100% 100%”，但这些似乎都保持比例。我认为“100% 100%”会做到这一点，但是当宽度压缩并且文本覆盖更多行时，高度不会拉伸。

这可能吗？

非常感谢！

【问题讨论】：

背景尺寸：100% 100%;见：stackoverflow.com/questions/1150163/…
我不确定这是否对您有帮助，但请查看 object-fit developer.mozilla.org/en-US/docs/Web/CSS/object-fit
谢谢 Muthu... 不适用于背景图片，但它确实应该成为 background-size 的另一种选择。
VA79 - 100% 100% 对我不起作用...仅在声明尺寸（或 vw 和 vh）的情况下才有效吗？

标签： css size background-image

【解决方案1】：

你也可以试试

背景尺寸：100% 100% with

body { 宽度:100% ;高度：100%;}

或者

使用对象拟合：填充；

fill：整个对象将完全填满方框。如果对象的纵横比与其框的纵横比不匹配，则对象将被拉伸以适应。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

【讨论】：

或尝试 background-size:100% 100% with body { width:100% ;高度：100%;}
感谢 Raushan，但对象匹配没有效果 - 我怀疑它不能用于背景图像。我尝试将 width:100% 和 height:100% 添加到我的 div 以使用 background-size:100% 100% 但它没有将图像拉伸到边缘。我想知道我是否有其他一些属性集阻止它正常工作。我需要仔细看看。
找到了！我加入了 .svg 背景图像（带有 png 后备），但 svg 不会自行重塑。当我删除它时，png 会根据需要重新调整形状/调整大小。
这对我来说是新的。谢谢你的分享。 :)