修复了完全 window 拉伸和适合且滚动时不重复的背景图像？

Question

我想让背景图片在浏览器中垂直 100% 和水平 100% 拉伸并适合 window。总是固定的。此外，当用户向下或向上滚动时。背景图像应填满整个 window。调整浏览器 window 大小时，背景图像应拉伸并保持不变。

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

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

修复了完全 window 拉伸和适合且滚动时不重复的背景图像？

Fixed background image with full window stretch and fit with no repeating when scrolling?

html

css

background

stretch