3

例子： 这个网站是一个很好的例子。

第 1 步：在一个选项卡中

  • 只需加载页面
  • 查看最右列中的任何图像。您会看到它们的分辨率为 638x368

第 2 步：打开一个新选项卡，然后...

  • 加载页面并打开 Firebug 或开发者工具 ( F12)
  • 转到Network（或Net）选项卡
  • 调整浏览器大小并重新加载页面
  • 再次最大化浏览器窗口
  • 查看最右列中的任何图像。您会看到它们的分辨率为 356x205

显然这是一些 JavaScript/jQuery 技巧（+ 一些其他技术），因为如果您检查最右侧列中的任何图像，您将看到如下代码：

<div class="article-img-container">
  <a data-turbo-target="post-slider" href="http://mashable.com/2012/12/27/gdigital-therapy-dog/">
    <span class="_ppf">
      <span data-q="true" data-s="http://rack.2.mshcdn.com/media/.../438c2f93/107/GeriJoy.jpg" data-z="638x368#"></span>
      <span data-q="(min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../46c08de9/107/GeriJoy.jpg" data-z="1276x736#"></span>
      <span data-q="(max-width: 1160px)" data-s="http://rack.2.mshcdn.com/media/.../fa9bdb7b/107/GeriJoy.jpg" data-z="356x205#"></span>
      <span data-q="(max-width: 1160px) and (min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../42ebf99d/107/GeriJoy.jpg" data-z="712x410#"></span>
      <span data-q="(max-width: 480px)" data-s="http://rack.2.mshcdn.com/media/.../948312d1/107/GeriJoy.jpg" data-z="280x157#"></span>
      <span data-q="(max-width: 480px) and (min-resolution: 1.5dppx)" data-s="http://rack.0.mshcdn.com/media/.../da1d8905/107/GeriJoy.jpg" data-z="560x314#"></span>
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzI3L2QyL0dlcmlKb3kuNWYyZWYuanBnCnAJdGh1bWIJNjM4eDM2OCMKZQlqcGc/438c2f93/107/GeriJoy.jpg">
    </span>
  </a>
</div>

view-source...如果你的页面不存在。是否有一个开源的 javascript 库可以做这样的事情？

我们怎么称呼它？自适应图像？

我想问的一个简单的问题是......是否可以根据浏览器的视口大小或屏幕分辨率为不同的设备提供不同尺寸的图像？

4

1 回答 1

1

最好的答案是，这在没有 javascript 的情况下已经有一段时间了

将来，该<picture>元素正是将要使用和需要的元素。它的 HTML 如下所示

<picture>
    <source srcset="examples/images/large.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/medium.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/small.jpg">

    <img srcset="examples/images/small.jpg" alt="Desciption of image">
</picture>

这与下面的技术本质上是相同的，但它的书写形式更容易，并且它用于imga 而不是 a background-image。在撰写此答案时，我们可以使用polyfill来使用这种格式或@media查询

CSS2 媒体类型引入了@media查询，允许我们根据视口尺寸影响页面的不同样式以及许多其他内容。这允许我们仅在需要时将较大的图像作为背景图像提供。它的使用示例如下

.myImg { background-image:url(myurlSmall.png); } /* Start with smallest */

/* Serve larger image only if needed */
@media (min-width:400px) {
    .myImg { background-image:url(myurlMedium.png); }
}
@media (min-width:1200px) {
    .myImg { background-image:url(myurlLarge.png); }
}
/* etc. */
于 2014-05-22T21:25:06.497 回答