在高密度显示器上设置封面图像响应答案

【问题标题】：Setting a Cover image responsive on high density displays在高密度显示器上设置封面图像响应
【发布时间】：2016-05-13 08:37:24
【问题描述】：

我有一个严重的问题。我还没有找到解决方案，所以我希望你知道。

我正在做网站。我需要制作响应式封面背景图片。（覆盖整个页面）。我开始了：

/* Location of the image */
  background-image: url(main.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

即使我调整窗口大小等，这段代码也能正常工作。所以它非常好。但是问题出现在高度分辨率的屏幕上，比如 iPad 或 iPhone。在那里，图像非常放大，有点像素化或散焦。我想，这是因为图像分辨率低，但我意识到，图像接近 5K。我想让它像this site 一样响应

任何帮助都很好，需要快速解决！

谢谢

【问题讨论】：

这与 SEO 有什么关系？你也可以分享一个演示吗？
可能与视网膜有关，请参阅erikrunyon.com/2010/10/retina-display-and-css-background-images
是的，它与视网膜有关..
和 SEO，因为它主要发生在 sfary 浏览器中......
我认为你不明白什么是 SEO。

标签： css

【解决方案1】：

您可以在 CSS 中创建媒体查询以手动配置视网膜显示器（或其他高分辨率屏幕）上的背景图像。

见CSS-tricks。

Mediaquery 视网膜显示：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

还有更多的证据：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { ... }

问题：

对于相同的问题/答案，另请参阅 this post。

【讨论】：

不完全是我想要的...我需要在电脑和移动设备上使用相同的图像：/

【解决方案2】：

这是因为您使用的是 background-attachment:fixed - 无论出于何种原因，在 iOS 上与 background-size:cover 一起使用时都会导致此行为。因此，如果您添加以下内容，则应该可以解决：

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

来自here on SO的解决方案。

【讨论】：