所以我已经阅读了一些关于网站视网膜图形的资料,因为我的大部分图像都可以是 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
,你的图像应该至少这个尺寸”?
谢谢!
最佳答案
回答您的第一个问题:是的,您可以使用 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/
关于css - 您可以在使用背景大小 :cover, 而不是指定尺寸的同时对图像进行视网膜化处理吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22773073/