移动设备响应时，图片会变得模糊

Question

我正在做这个网站，当我在手机上看到背景图片时，它会变得模糊。即使在谷歌开发工具中，如果我尝试响应工具，它似乎也很好。我试过不同的手机，它们也显示得很模糊，所以问题出在我身上：(这是代码：

.main {
/* background-image: url("https://images.unsplash.com/photo-1559742811-822873691df8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"); */
background-image: url("https://images.unsplash.com/photo-1534080564583-6be75777b70a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* background-size: contain; */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #464646;
}

我在这里和其他地方都看到了，但似乎什么都不起作用。我在这里做错了什么？感谢您的帮助

Answer 1

尝试在此处使用object-fit属性w3链接