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属性。根据{{3}}：

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

似乎有srcset属性的旧设计。但是，srcset语法和用法已更改为全新的内容。使用srcset：

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

用于响应图像的图像和srcset

2 个答案: