Question

我想实现一项简单的任务我在可变宽度容器中有一个图像容器可以具有300,400,700或900像素的宽度。这是通过媒体查询来完成的图像应占据该容器的所有宽度。因此它也将是300,400,700或900像素宽。对于所有宽度值，图像应具有不同的源。所以我可以在手机上提供更小的图像。

我认为可以使用srcset元素的img属性完成此操作，也可以在sizes属性的帮助下完成。像这样的宽度

<img src="http://dummyimage.com/300x200/abc/000" 
      alt="dummy" 
      srcset="
        http://dummyimage.com/900x200/abc/000 900w, 
        http://dummyimage.com/700x200/abc/000 700w, 
        http://dummyimage.com/400x200/abc/000 400w, 
        http://dummyimage.com/300x200/abc/000 300w
      " 
       />

但它不是那样工作，因为浏览器选择的图像与显示端口的宽度成比例而不是图像本身的宽度。
使用http://scottjehl.github.io/picturefill/中的picturefill polyfill的示例：http://codepen.io/HerrSerker/pen/itBJy。这不起作用，因为它将采用下一个尺寸的一个图像。

我当然可以考虑到这一点并将我的srcset更改为此

      srcset="
        http://dummyimage.com/900x200/abc/000 999999w, 
        http://dummyimage.com/700x200/abc/000 900w, 
        http://dummyimage.com/400x200/abc/000 700w, 
        http://dummyimage.com/300x200/abc/000 400w
      "

这将在桌面上运行，但在视网膜显示器上失败，因为此处考虑了设备像素比率，但与媒体查询的方式不同。并没有用，因为图像应该知道视口的宽度和相同的宽度以及编译时的宽度？没门。图像我在网格系统中使用图像。如果我在桌面设备上的3列网格和智能手机上的1列网格中，则图像具有不同的宽度。这应该不是图像的责任来计算宽度和视口宽度的比率。

我对sizes属性也没有任何好运（这里没有例子）。原因与上述相同。在尺寸属性中，我说根据媒体查询，我的图像宽度应该是多少。这太过分了。图像应该如何知道？

所以我解决了这个问题。我设置了data-srcset属性，其语法与srcset属性本身相同，但使用自定义JavaScript编程。示例：http://codepen.io/HerrSerker/pen/tCqJI

jQuery(function($){
  var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
  var regw = /(.*)w/;
  var sets, $set, set, myMatch, i, w, that, last;

  var checkData = function() {
    $('img[data-srcset]').each(function() {
      that = $(this);
      $set = that.data('srcset');
      sets = [];
      while(myMatch = reg.exec($set)) {
        set = {};
        set.src = myMatch[1];
        set.w = (myMatch[2].match(regw))[1];
        sets[set.w] = set;
      }
      w = that.width();
      last = 0;
      for (i in sets) {
        last = i;
        if (w <= i) {
          that.attr('src', sets[i].src);
          return;
        }
      }

      that.attr('src', sets[last].src);
    });
  };


  checkData();
  $(window).on('resize', checkData);
});

这有效，但感觉不对。但也许不是，正如规范所说的那样，响应式图像的表现方式就像它一样。但我觉得这是错误的方式。响应式图像的90％用例不适用于规范。

我错了吗？我没有以定义的方式使用srcset吗？我是否错误地理解了规格？ W3C和响应式图像社区组织是否以这种方式思考现实？

Answer 1

较小的图像是否缩小了较大图像的版本？或者他们裁剪（艺术指导）？如果是后者，则应使用picture和source media。

浏览器仅使用视口决定下载哪个图像的原因是浏览器想要下载图像时唯一可用的内容。 CSS（可能）尚未下载。因此，如果您使用srcset + sizes，则必须在sizes中重复断点和图像宽度。

Answer 2

此问题似乎与Responsive full width image banner with fixed height using srcset

重复

像zcorpan所说的那样，你想要做的事情属于＆＃34;艺术方向＆＃34;用例（因为不同的图像具有不同的比例），所以你应该使用<picture>元素，而不是srcset。有关语法示例，请参阅其他问题的答案。

为什么响应式图像如此关闭（我的）现实？

2 个答案: