3

我有一组 2048 x 1496 大小的图像,我仅用于 iPad Retina 显示屏。我的网站只针对 iPad Retina,所以我现在不必担心下采样或其他任何事情。我刚刚创建了仅用于视网膜显示的网页。

我有 css 和 html 指定图像(作为背景图像)。但是当我在 Retina 上看到页面时,它不是完全可见的,它是部分可见的。

当图像实际上是 2048 x 1496 像素时,为什么会这样?有没有什么设置要做。

4

2 回答 2

4

您是否尝试过在具有大视网膜图像作为背景的元素上设置“背景大小”属性?

它看起来像这样:

#retinaImage {
 background: url(images/huge-retina-image.jpg) no-repeat;
 width: 1024px;
 height: 768px;
 background-size: 1024px 768px;
}

iPad 的分辨率是 2048x1536,但在“CSS 像素”中仍然是 1024x768——只是这些 CSS 像素中的每一个都包含 4 个设备像素。从概念上讲,您可能很难理解这一点。这是一篇可能有帮助的文章:

迈向视网膜网络(Smashing Magazine)

于 2012-11-14T00:56:24.797 回答
1

阅读 Chris 分享的文章(Towards A Retina Web)。您不需要使用 2048 x 2744。1024 X 768 分辨率的图像就足够了。Ipad Ratina 显示器将自动处理其分辨率。

使用 1024 X 768 分辨率。您将自动以小文件大小获得更好的显示图像。不需要在 CSS 中使用背景大小。

于 2012-11-14T04:34:13.653 回答