Question

示例： This website是一个很好的例子。

STEP-1：在一个标签页

只需加载the page
查看最右侧列中的任何图片。你会发现它们的分辨率是638x368

第2步：打开新标签页，然后......

加载the page并打开Firebug或开发者工具（ F12 ）
转到网络（或网络）标签
调整浏览器大小并重新加载页面
再次最大化浏览器窗口
查看最右侧列中的任何图片。你会发现它们的分辨率是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库可以做这样的事情？

我们称之为什么？ 自适应图片？

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

Answer 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>

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

CSS2媒体类型引入了@media个查询，这些查询允许我们根据视口维度和其他许多内容影响页面的不同样式。这样，只有在需要时，我们才能serve larger images作为背景图片。其使用的一个例子如下

.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. */

基于解析使用JavaScript为不同设备提供不同大小的图像

1 个答案: