Srcset 以错误的大小渲染图像答案

【问题标题】：Srcset rendering image in wrong sizeSrcset 以错误的大小渲染图像
【发布时间】：2019-12-25 17:43:48
【问题描述】：

我正在尝试根据设备宽度提供响应式/自适应图像。

原图：

<img src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"/>

使用 Srcset：

<img
      src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
      srcset="
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400   400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800   800w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
      "
/>

我面临两个问题：

1) 即使在较小的设备（如 iPhone 6s）上，也会加载宽度为 2000px 的图像（它应该加载 800px 的图像）。

2) 我将两个图像（有和没有 srcset）放在一起。他们都加载了相同尺寸的图像。但是，与其他相比，带有 srcset 的那个显得很小。由于在 html/css 中没有指定宽度，它应该以实际图像的宽度呈现，对吧？这是小提琴：https://jsfiddle.net/hfcbatdn/

【问题讨论】：

标签： html css image responsive-images srcset

【解决方案1】：

使用srcset attribute 你必须提供sizes attribute 来制作响应式图片。改成这样。

<img
      src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
      srcset="
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400   400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800   800w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
      "
/>

到

<img
      src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
      srcset="
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400   400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800   800w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
        https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
      "
      sizes="(max-width: 991px) 480px,(max-width: 1024px) 800px,(max-width: 1920px) 1400px,(max-width: 2560px) 2000px,3800px"
/>

更改sizes属性max-width=?你的愿望@media查询。您还必须在<head></head> 标签内添加meta view port。 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">.

更多详情请见Responsive Images。

【讨论】：

感谢您的回答。但我提到的第二个问题仍然存在。请参阅jsfiddle.net/ntjfwecy 我还尝试使用responsivebreakpoints.com 生成响应式图像。它添加的“尺寸”只有(max-width: 728px) 100vw, 728px