图像和响应式图像的 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

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

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

似乎有一个srcset属性的旧设计。但是，srcset语法和用法已更改为全新的事物。要使用srcset：

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

Answer 2

Auto IMG Responsive CSS

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