响应背景图像适合宽度和高度/没有封面

Question

我有一个height: 100vh;的容器。这个容器有一个背景图像。我希望背景能够响应并适合整个div。使用background-size: cover并不会让它看起来不错。我怎样才能做到这一点？感谢

Answer 1

这取决于你在寻找什么，有很多选择：

1. background-size:contain它会延伸到最大宽度和高度 如果适合容器，其余的空间将重复背景 你没有设置background-repeat:no-repeat
2. background-size:100% 100%;会将背景拉伸到容器宽度和高度的100％，但这会改变图像比例 - 图像会变形
3. cover将拉伸图像，因此整个区域都覆盖着图像，但是 其余的图像会被歪曲（正如你已经发现的那样）

您还可以使用css（百分比填充顶部/底部）来获得具有给定比例的响应式容器，因此同时具有完整图像覆盖和无边缘