0

这是我从这个教程中学到的用于显示我的 Retina 优化徽标的 CSS：http: //net.tutsplus.com/tutorials/html-css-techniques/the-right-way-to-retinafy-your-websites/

但！当我在我的 iPad 和三星 Galaxy Note II（safari、Firefox、Dolphin 应用程序）上进行测试时，Retina 图像以全尺寸显示，即 1200 像素 x 500 像素。

所以它正在抓取正确的图像，而不是调整它的大小。

我已经在网上搜索了线索，但找不到任何线索。现在要放弃提供视网膜图像了。有任何想法吗？非常感谢！

<div class="logo-splash"></div>

/* CSS for devices with normal screens */
.logo-splash {
height: 250px;
background-size: 600px 250px;
background: url(images/iaay_splash_logo.png) no-repeat center center;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.logo-splash {
background-size: 600px 250px;
height: 250px;
background: url(images/iaay_splash_logo@2x.png) no-repeat center center;
 }
}
4

1 回答 1

0

我发现制作视网膜徽标 imgs 的最佳方法就是使用双倍尺寸图像。

例如，如果您希望徽标图像为 250 像素 x 650 像素

获取 500px x 1300px（双）的徽标版本并替换您的常规徽标（在您的情况下为“iaay_splash_logo.png”），而不是将其用作背景 img 使用这个非常基本的 HTML

<div class="logo-splash">
   <img height="250px" width="600px" src="images/iaay_splash_logo.png"/>
</div>

现在，当您在视网膜显示器上访问该站点时，它只是拉取相同的图像，但它具有两倍的像素，但仍保持正确的大小，正如您在 img 标记中告诉它的那样，高度 =“250px”，宽度 =“600px”。

于 2013-10-23T07:01:06.830 回答