我想让一个背景图像在浏览器窗口中100%垂直和100%水平拉伸和拟合。 总是修好的。 也是当用户向下或向上滚动时。 背景图像应该填满整个窗口。 当浏览器窗口调整大小时，背景图像应伸展并保持不变。
在尝试了这么多失败的变种之后，我得到的是:
背景图像拉伸
我的css代码:
body, html {
width: 100%;
height: 100%;
margin: 0;
background: url(https://i-cdn.phonearena.com/images/article/125256-two_lead/Android-11-R-Preview-A-quality-of-life-update.jpg);
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
你好，您可以使用这段代码来实现您应该使用background-repat和size目标。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-image: url(YourImagePath);
background-repeat: no-repeat;
background-size: cover;
}
对象匹配
https://cs-tricks.com/almanac/properties/o/object-fit/
它是您的最佳选择，能100%舒展和合身
.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }
https://jsfiddle.net/y3cobhp1/
(&P； 你到底在下面找什么
.object-fit_fill { object-fit: fill }
OR
.object-fit_cover { object-fit: cover }
https://jsfiddle.net/y3cobhp1/1/
