修复了具有全窗口拉伸且滚动时不重复的背景图像？

Question

我想让背景图像拉伸并垂直 100% 和水平 100% 适应浏览器窗口。一直固定。当用户向下或向上滚动时。背景图像应填满整个窗口。调整浏览器窗口大小时，背景图像应拉伸并保持不变。

在尝试了这么多不成功的变体之后，我到目前为止所拥有的：

background image stretch

我的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*/

}

Answer 1

对象拟合

https://css-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/

&你在下面寻找什么

    .object-fit_fill { object-fit: fill }
OR
    .object-fit_cover { object-fit: cover }

https://jsfiddle.net/y3cobhp1/1/