使用 CSS3 媒体查询响应屏幕覆盖图像的最可靠方法？答案

【问题标题】：Most reliable way for responsive screen-covering images using CSS3 media queries?使用 CSS3 媒体查询响应屏幕覆盖图像的最可靠方法？
【发布时间】：2013-12-06 15:42:40
【问题描述】：

我目前正在为个人项目设计一个登陆页面，我考虑使用屏幕覆盖图像（浏览器窗口的 100% 宽度和 100% 高度）来完善体验。

在通常的标准化之后，我开始了

html, body {
    height: 100%;
    overflow: hidden;
}

#hero {
    width: 100%;
    min-height: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

从纵向和横向的大量媒体查询开始，您将从这个 sn-p 中获得概念：

...

@media only screen and (min-width: 2049px) and (max-width: 2560px) and (min-height: 1441px) and (max-height: 1600px) {
    #hero {
        background-image: url(../img/hero/landscape/cover-2560-1600.jpg); /* 8:5 */
    }
}

@media only screen and (min-width: 2049px) and (max-width: 2560px) and (min-height: 1601px) and (max-height: 2048px) {
    #hero {
        background-image: url(../img/hero/landscape/cover-2560-2048.jpg); /* 5:4; */
    }
}

@media only screen and (min-width: 2561px) and (min-height: 2049px) {
    #hero {
        background-image: url(../img/hero/cover-any-max.jpg); /* fallback for ultra high resolutions */
    }
}

除了需要做大量工作来为最常用的分辨率创建高质量图像并为每个分辨率编写媒体查询之外，这些查询都无法处理不常见的浏览器尺寸，如果，例如，用户将他的窗口拖得非常宽但又非常短，他得到的只是一个白色背景。

我希望得到有关此问题的提示，因为我在网上找到的大多数响应式图片的报道都不是很有帮助，因为它没有得到我想要的广泛使用。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

一种方法是使用单个大图像，比您希望网站访问者使用的任何分辨率都大得多，并降低质量。这在 100% 尺寸下看起来不太好，但是当按比例缩小到较小的分辨率时，它会开始看起来不错。执行此操作后，您可以将一张图片用于纵向，一张用于横向，或者仅将一张图片与以下内容一起使用：

    html, body {
        height:100%;
        margin:0;
    }
    body {
        background-image:url('../img/hero/cover-any-max.jpg');
        background-size:cover;
    }

纵向和横向媒体查询：

@media only screen and (orientation : landscape)
@media only screen and (orientation : portrait)

有关 HiDPI 低质量方法的更多信息，请查看这篇文章 - html5rocks

【讨论】：

谢谢！对于类似问题，这似乎是一个非常好的解决方案，但在我的情况下，我需要提供不同纵横比的图像，这意味着高分辨率低质量 16:9 基础图像很可能不仅看起来有颗粒感而且在高分辨率 5:4 屏幕上嘈杂，它看起来也会严重失真。

【解决方案2】：

您可以使用纵横比查询来捕获视口何时变得非常宽但又非常短：

@media only screen (min-aspect-ratio: 8/5) and (max-aspect-ratio: 8/4)
{
    #hero {
        background-image: url(../img/hero/landscape/cover-2560-1600.jpg); /* 8:4 ~8:5 */
    }
}

/* Your other aspect-ratio queries */


/* If browser is very wide + small */
@media only screen (min-aspect-ratio: 22/1) and (max-aspect-ratio: 22/2)
{
    /* Assign other styles to handle it */
}

/* If browser is very narrow + tall */
@media only screen (min-aspect-ratio: 1/22) and (max-aspect-ratio: 2/22)
{
    /* Assign other styles to handle it */
}

您显然需要自己确定断点。

【讨论】：

【解决方案3】：

好的，如果您只有一张图片，这似乎不是一个很好的解决方案，但如果您有多个，或者您接受了您无法控制的用户提交的内容，那么就有一个服务器端解决方案 (RESS)动态缩放或裁剪图像以完美适应访问者的屏幕，这确实是您的最佳选择。

您会发疯地写出所有可能的媒体查询并预先缩放您的图像。此外，正如您所提到的，设备的纵横比是不同的，或者您可能会遇到具有奇怪分辨率的设备......更不用说 Retina 显示器等了。

如果您真的想要一个万无一失的方法，请使用 RESS。我知道Pixtulate，但我确定还有其他人。

【讨论】：