移动响应时图片变得模糊

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;
}

我在here和其他地方看到它，但似乎没有任何效果。我在这里做错了什么？ 感谢您的帮助

Answer 1

尝试玩

object-fit

属性w3链接在这里

Answer 2

想知道你是否解决了这个问题。我现在正在经历完全相同的事情。是图像质量吗？或者有缩放比例的东西？