我有一组2048 x 1496尺寸的图像,我只用于iPad Retina显示屏。我的网站仅针对iPad Retina,因此我现在不必担心羽绒采样或其他任何问题。我刚创建了仅用于视网膜显示的网页。
我有css和html指定图像(作为背景图像)。但是当我看到Retina的页面时,它看不到它的部分可见。
为什么这个图像实际上是2048 x 1496 px?有没有任何设置要做。
答案 0 :(得分:4)
您是否尝试在具有大视网膜图像作为背景的元素上设置“background-size”属性?
它看起来像这样:
#retinaImage {
background: url(images/huge-retina-image.jpg) no-repeat;
width: 1024px;
height: 768px;
background-size: 1024px 768px;
}
iPad的分辨率为2048x1536,但在“CSS像素”中仍然是1024x768 - 只是每个CSS像素都包含4个设备像素。从概念上讲,很难围绕这个问题。这篇文章可能有所帮助:
答案 1 :(得分:1)
阅读Chris(Towards A Retina Web)的文章分享。您不需要使用2048乘2744. 1024 X 768分辨率图像就足够了。 Ipad Ratina显示器将自动处理其分辨率。
使用1024 X 768分辨率。您将自动以较小的文件大小获得更好的显示图像。不需要在CSS中使用背景大小。