img 不响应 srcset 指定的尺寸

Question

我想使用 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/

知道我错过了什么吗？

Answer 1

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

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

I've added a delay to this process to reduce the number of times that it is executed. You'll notice that this practice forces the browser to download the correct image at each resize and this is bad for bandwidth. I do not recommend the use of this technique, let the browser decides which image it uses on each situation. I think that viewport resize is not a common situation in an everyday environment. Maybe is better for your purposes the use of picture element (using some approach to making it compatible with old browsers) as @KrisD said.

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, "?r=" + random + " "));

}

jsfiddle

Answer 2

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

1- 当您设置 sizes 属性值时，您将最后一个属性值和默认值设置为 280，如示例所述，但它之前的值是 580，而不是您设置的 280

2- 当你使用图像的虚拟生成器之一时，你在图像的末尾做了一个斜线 link，然后 space 在将图像与其大小绑定之前，这有图像生成器站点翻译了图像上的文本，您需要将代码更改为以下代码，以便与您提到的示例 link 中解释的相同

<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" />

Answer 3

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

例如

<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 这样会更有效。

img 不响应 srcset 指定的尺寸

img not responding to srcset specified dimensions

html

css

image

srcset