img 不响应 srcset 指定的尺寸答案

【问题标题】：img not responding to srcset specified dimensionsimg 不响应 srcset 指定的尺寸
【发布时间】：2016-04-11 17:28:17
【问题描述】：

我想使用 srcset 实现响应式图片，如 here 所述，因此用户加载的图片 src 与他的分辨率最相似。

问题是我做了这个测试，它没有响应视口的变化，

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle：http://jsfiddle.net/ad857m1r/9/

知道我错过了什么吗？

【问题讨论】：

它作为响应式工作。你能告诉我你想要什么吗？
@ChoncholMahmud 我没有看到图像改变了它的 src 属性（对于定义的分辨率，它应该是不同的和不同的纵横比）。图像一直都是一样的......
也许这会有所帮助：stackoverflow.com/a/29495023/729033
@KrisD 你认为哪一部分会有所帮助？
@ToniMichelCaubet 抱歉没有更具体。此解决方案仅在从小尺寸开始并将视口扩展到桌面尺寸时才有效（请在尝试前清理缓存）。它不会以相反的方式发生，因为您已经在缓存中有更大的图像，并且用户代理不需要下载被认为是相同图像的新图像数据。根据您最终想要实现的目标，如果您只是在分辨率/像素密度之间切换，请使用 img 标签，或者如果您想要进行所谓的“艺术指导”，请使用图片标签。

标签： html css image srcset

【解决方案1】：

srcset 属性在第一次加载时由浏览器解释，然后加载的图像存储在 cache 和 the browser might not load any other image 中，直到您清除 cache 并重新加载页面。

如果您希望在页面的每个resize 事件上重新解释srcset，您需要更新它，在每个url 末尾添加一个随机变量，然后浏览器将重新加载正确的那个屏幕尺寸。

我在这个过程中添加了一个延迟，以减少它被执行的次数。您会注意到这种做法会强制浏览器在每次调整大小时下载正确的图像，这对带宽不利。我不推荐使用这种技术，让浏览器决定它在每种情况下使用哪个图像。我认为视口调整大小在日常环境中并不常见。正如@KrisD 所说，使用picture element（使用some approach 使其与旧浏览器兼容）可能更适合您的目的。

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

【讨论】：

我很高兴听到这个消息 ;) Here 你可以找到更多信息。
css-tricks 很棒，我之前读过这篇文章和更多关于 css-tricks 的文章，只是不知道这些图像的浏览器缓存^^

【解决方案2】：

您只需复制并粘贴它。首先你需要知道你必须按递增顺序排列图像的大小，然后你需要根据它进行调整。

举例

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

通过这个你可以查看你的结果，我刚刚试过这个和它的工作

img {
  width: 100%;  
}

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

注意事项-> 将您的图像称为image.jpg，这样会更有效。

【讨论】：

【解决方案3】：

当您尝试为您提到的链接应用示例中的代码时，您对示例中的代码进行了一些编辑：

1- 当您设置 size 属性值时，您将最后一个属性值设置为 280，如示例所述，但之前的值直接为 580，而不是您所做的 280

2- 当您使用其中一个图像的虚拟生成器时，您在图像链接的末尾添加了一个斜线，然后在将图像与其大小绑定之前留出空格，并且图像生成器站点已将其翻译为带有文本在图像上，您需要将代码更改为以下内容，与您提到的示例链接中的说明相同

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />

【讨论】：