用于响应式图像的图像和 srcset

Question

我正在尝试使用 srcset 为我的网站创建响应式图像，我的想法是我有几个断点，320、768、1024、1280，并且对于每个断点，我都会显示一个适当的分辨率图像，所以对于320-768 之间的断点我会显示 768 图像。

我已经尝试了以下，

    <img src="http://abc.dev/wp-content/uploads/2017/05/abc-320x187.jpg"  
     srcset="http://abc.dev/wp-content/uploads/2017/05/abc-768x450.jpg 480w,  
     http://abc.dev/wp-content/uploads/2017/05/abc-992x581.jpg 768w, 
     http://abc.dev/wp-content/uploads/2017/05/abc-1200x703.jpg 992w,
     http://abc.dev/wp-content/uploads/2017/05/abc-1500x878.jpg 1200w,
   http://abc.dev/wp-content/uploads/2017/05/abc-1800x1054.jpg 1500w,  
   http://abc.dev/wp-content/uploads/2017/05/abc-1920x1124.jpg 1700w"   alt="">

无论我的屏幕尺寸如何，我似乎都能获得 1920x1124 的图像。

谁能解释我做错了什么？

Answer 1

自动 IMG 响应式 CSS

img{max-width:100%;height:auto}

Answer 2

您的代码中srcset 的用法不正确，缺少sizes 属性。根据specification：

如果存在 srcset 属性并且有任何使用宽度描述符的图像候选字符串，则 size 属性也必须存在，并且是 size 属性。

似乎srcset 属性的旧 设计。然而，srcset 的语法和用法已经变成了一个全新的东西。使用srcset：

1. sizes 必须存在才能定义图像的显示区域。例如，sizes="(min-width: 600px) 200px, 50vw" 表示当 (min-width: 600px) 媒体条件匹配时，图像将为 200px 宽，否则为 50vw 宽（视口宽度的 50%）。这是来自MDN 的示例。
2. 对于srcset属性，值中的480w、1200w等表示对应图像文件的宽度，而不是视口的宽度。
3. 在计算出图像的显示区域（宽度）（step-1），并定义候选图像的文件宽度（step-2）后，浏览器将使用此信息计算所有图像的像素比 -- width_of_image_file/display_area_width
4. 然后，浏览器可以根据用户屏幕的像素密度、缩放级别以及可能的其他因素（例如用户的网络条件）选择任何给定资源。