html - 使用媒体查询获得完美图像响应的正确方法是什么？

Question

我正在使用 Bootstrap，我有一个看起来像这样的 div:

<div class="header-back one"></div>

然后我有如下所示的 @media 查询:

@media (min-width: 320px) {
  .landing-page .header-back.one {
    background: asset-url('landing/320x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }    
}

@media(min-width: 375px) {
  .landing-page .header-back.one {
    background: asset-url('landing/375x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 425px) {
  .landing-page .header-back.one {
    background: asset-url('landing/425x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 768px) {
  .landing-page .header-back.one {
    background: asset-url('landing/768x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1024px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1024x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1440px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1440x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

@media(min-width: 1441px) {
  .landing-page .header-back.one {
    background: asset-url('landing/2560x500-View-Anywhere.jpg') 100% 0 no-repeat;
  }
}

问题是这不是无缝的。

例如，这是它在我的 13"Macbook Pro 上的样子:

注意灰色背景。那不应该在那里。整个中间 block 应该是蓝色背景。

div 的大小为 1200+ px，因此某些规则无法正常工作:

我是否正确使用了这些媒体查询？我什至需要这样做吗？我只想在这些断点处在所有设备上获得流畅的体验....我该如何实现？

编辑 1

按照 Tha'er 下面的建议重新调整样式后，这就是我所做的:

.landing-page .header-back.one {
  background: asset-url('landing/2560x500-View-Anywhere.jpg') 100% 0 no-repeat;
  // background-size: cover;
}

@media (max-width: 320px) {
  .landing-page .header-back.one {
    background: asset-url('landing/320x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }

}

@media(max-width: 375px) {
  .landing-page .header-back.one {
    background: asset-url('landing/375x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }    
}

@media(max-width: 425px) {
  .landing-page .header-back.one {
    background: asset-url('landing/425x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 768px) {
  .landing-page .header-back.one {
    background: asset-url('landing/768x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 1024px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1024x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

@media(max-width: 1440px) {
  .landing-page .header-back.one {
    background: asset-url('landing/1440x500-View-Anywhere.jpg') 100% 0 no-repeat;
    // background-size: cover;
  }
}

这是生成的结果，它是压缩到最小视口(viewport)中的最大图像(这不是我想要的):

Answer 1

实现您想要的效果的一种方法是使用图像作为 div 背景，而不是在 div 中使用它。在 div 中添加图像并不总是会在所有尺寸下都产生良好的效果，使用 div 背景图像方法在所有屏幕尺寸下都会产生良好的效果。

.div { background-image: url(image.jpg);

背景位置:中心中心； 背景大小:覆盖；

这应该会在所有屏幕尺寸上给您带来良好的效果，我猜这就是您想要实现的目标。