Question

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

原始图片：

<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/

Answer 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查询。另外，您还必须在meta view port标签内添加<head></head>。 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">。

Responsive Images中的更多详细信息。

Srcset渲染图像尺寸错误

1 个答案: