Question

我目前正在设计个人项目的目标网页，我考虑使用屏幕覆盖图像（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;
}

并开始处理纵向和横向的大量媒体查询，您将从此片段中获得概念：

...

@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 */
    }
}

除了为最常用的分辨率创建高质量图像并为每一个分别编写媒体查询所需的大量工作外，这些查询都不能处理不常见的浏览器大小，如果例如，一个用户拖着他的窗户很宽但也很短，他只有一个白色的背景。

我很欣赏有关此问题的提示，因为我在网上发现的大多数响应式图片的报道都不是很有用，因为它并没有像我希望的那样广泛使用。

Answer 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

Answer 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 */
}

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

Answer 3

好的，如果您只有一个图像，这似乎不是一个很好的解决方案，但如果您有几个，或者您接受用户提交的内容而您无法控制，那么请使用服务器端解决方案（RESS）即时缩放或裁剪您的图像以完美地适合您的访客屏幕，这是您最好的选择。

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

如果你真的想要一个傻瓜证明的方法，去RESS。我知道Pixtulate，但我确定还有其他人。

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

3 个答案: