基於解析使用JavaScript為不同設備提供不同大小的圖像

Question

示例： 本網站是一個很好的例子。

第1步：在一個選項卡中

• 只需加載頁面
• 查看最右列中的任何圖像。 你會發現它們的分辨率是638x368

第2步：打開一個新標簽，然后......

• 加載頁面並打開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頁面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 。 在撰寫此答案時，我們可以使用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. */