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＆＃34; Macbook Pro：

注意灰色背景。那应该不存在。整个中间块应为蓝色背景。

div的大小是1200+ px，所以有些规则不能正常工作：

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

修改1

根据下面的Tha＆＃39建议重新调整样式之后，这就是我所做的：

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

这就是产生的，最大的图像被压缩到最小的视口（这不是我想要的）：

Answer 1

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

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

背景位置：中心; background-size：cover;

这应该可以让您在所有屏幕尺寸上都获得良好的效果，我想这就是您想要实现的目标。

Answer 2

尝试将所有min-width替换为max-width，例如：

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

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

2 个答案: