0

我希望在我的 HTML 中拥有漂亮的图像，这些图像可以在具有 Retina 显示器的计算机的浏览器上很好地显示。img我猜我只需要在我的标签中有一个高分辨率图像。但是，较低分辨率的浏览器都必须下载这个更大的文件，然后缩小它，这可能会导致图像质量低于我在 Photoshop 之类的工具中缩小它。

我希望有这样的事情我可以做：

<img src="/example.png" src-retina="/example-high-res.png"/>

显示 2 个不同图像的正确方法是什么，1 个用于正常显示，1 个用于视网膜显示？

4

6 回答 6

2

使用CSS 很容易

使用图像源属性，执行此操作的标准方法较少。我自己检查了一种基于 JS 的方法window.devicePixelRatio：

<img id="example-img" width="100" height="100"/>
<script>
  if (window.devicePixelRatio > 1) {
    $('#example-img').src = "/example-high-res.png";
  } else {
    $('#example-img').src = "/example.png";
  }
</script>

但如果可以，请使用 CSS 和媒体查询。它干净得多。

于 2012-11-12T19:41:34.483 回答
1

您需要制作两个（或可能更多）CSS 文件，并在 JS 的帮助下根据用户的浏览器设置使用它们。移动站点的 css 文件应该创建一个在手机中完全可见的新布局。

查看此 SO Question以更好地理解该主题。

于 2012-11-12T19:41:22.910 回答
1

使用响应式设计原则根据设备屏幕分辨率放大或缩小图像大小。

在 CSS 中，您可以定义目标设备的max-width和max-height。这是您在 CSS 中声明它的方式：

@media only and (max-device-width:1024px) and (orientation:portrait)

之后，您必须以百分比指定元素的宽度和高度，相对于父元素。这是可行的方法，但在移动设备上的带宽消耗方面不是最好的方法，因为即使我们将百分比设置得较低，图像也会以其原始大小上传，并且在浏览器解析 CSS 文档后完成缩小。

W3C 提出了一些关于不同设备应如何处理图像的条款，但没有一个被普遍接受和标准化。

最受好评的提议之一是新的<image>和<source>标签，它接受不同的图像源并根据屏幕分辨率使用最合适的图像尺寸。

<picture alt="">

  <!-- low-res, default -->
  <source src="small.jpg">

  <!-- med-res -->
  <source src="medium.jpg" media="(min-width: 400px)">

  <!-- high-res -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback content -->
  <img src="small.jpg" alt="description of image">

</picture>

有一个模仿提议的图片元素的 polyfill：https ://github.com/scottjehl/picturefill

这里有两篇关于这个概念的彻底解释的文章：

http://nicolasgallagher.com/responsive-images-using-css3/

http://css-tricks.com/on-responsive-images/

于 2012-11-12T19:43:09.423 回答
1

有几种不同的方法，它们都有优点和缺点。苹果自己实际上为视网膜设备提供了视网膜和标准图像，这很有效，但显然会导致下载量很大。

如果你想要半自动化的东西，试试Retina.js。从描述：

当您的用户加载页面时，retina.js 会检查页面上的每个图像，以查看您的服务器上是否有该图像的高分辨率版本。如果存在高分辨率变体，脚本将就地交换该图像。

该脚本假定您使用 Apple 规定的高分辨率修饰符 (@2x) 来表示服务器上的高分辨率图像变体。

于 2012-11-12T19:44:40.107 回答
0

您可以使用带有 css 背景定义的 div 来指定图像。当客户端是具有“视网膜显示器”的 Apple 设备时，使用 css 媒体查询可以选择正确的 css 定义。

于 2012-11-12T19:42:03.187 回答
0

你可以用 jQuery 做到这一点：

HTML：

<img src="/example.png" src-retina="/example-high-res.png"/>

Javascript：

  if (window.devicePixelRatio > 1) {
    $('img').each(function() {
      var src_retina = $(this).attr("src-retina");
      $(this).attr("src", src_retina);
    });
  }

这个演示展示了它的工作方式：http: //jsfiddle.net/TLz7S/。

注意：我可能检测到视网膜显示错误；我其实没有。如果有人发现不正确，请告诉我。

于 2012-11-12T20:08:35.277 回答