css - 您可以在使用背景大小 :cover, 而不是指定尺寸的同时对图像进行视网膜化处理吗？

Question

所以我已经阅读了一些关于网站视网膜图形的资料，因为我的大部分图像都可以是 2X，我猜:为什么不呢，同时使用 @media queries。

但是，关于大小调整，我所能找到的全部是您应该指定尺寸，但我想知道:使用 background-size:cover 的背景图像怎么样!

如:

div {
    background-image: url('../images/foo.png');
    background-size:cover;
    height:100%;
    width:100%;
    // max-size:1920px by X
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1921px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (                min-resolution: 192dpi) and (min-width: 1921px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1921px) {
    div {
        background-image: url('../images/foo@2x.png');
        background-size:cover;
        height:100%;
        width:100%;
        // min-size:1921px by X
    }
}

第二个问题，如果可以的话:如果你有一个最大大约 2400x1380 的图像，但是访问者机器的最大分辨率是 2880x2160，就像 Macbook 15"视网膜一样 - 因此无法提供完整的@ 2X 体验 - 无论如何提供@2x，还是提供常规的、最大 1920px 的图像？

第三，关于 1 和 2 - 使用 :cover 时，您没有指定尺寸，因此不知道 @2x 图像的最小值。考虑到这一点，有没有办法说“对于视网膜图像和使用 :cover，你的图像应该至少这个尺寸”？

谢谢!

Answer 1

回答您的第一个问题:是的，您可以使用 background-size:cover 对图像进行视网膜化处理。如果您定义一个 div 并让它的背景被双倍尺寸的图像覆盖，它将是视网膜 (@2x)。

对于您的其他问题，我不会详细说明或回答它们，因为我觉得您尝试做的实际上不是针对视网膜优化的正确方法!

我发现为所有设备处理视网膜图像的最佳解决方案是使用@media 查询为特定客户端设备提供最佳图像(例如@1.5x、@2x、@3x 等)。查看我的博客文章以获得完整的解决方案: http://blog.benmarten.me/best-way-to-optimize-website-images-for-all-possible-retina-sizes/