代码之家 › 专栏 › 技术社区 › Gijo Varghese

Srcset以错误的大小渲染图像

srcset responsive-images image css html

Gijo Varghese · 技术社区 · 4 年前

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

原始图像:

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

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

0 回复 | 直到 4 年前

Rahul 4 年前

具有 srcset attribute 你必须提供 sizes 属性

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

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

详情请参阅 Responsive Images