【问题标题】:How to use image srcset properly in HTML5如何在 HTML5 中正确使用图像 srcset
【发布时间】:2018-06-15 04:19:35
【问题描述】:

我已经设置了以下 img srcset:

<img srcset="http://via.placeholder.com/320x150 320w,
             http://via.placeholder.com/480x150 480w,
             http://via.placeholder.com/800x150 800w"
        src="http://via.placeholder.com/800x150"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
      width="200" />

无论我如何设置 img 的宽度,或者我如何调整窗口大小,chrome 总是会下载并显示 800px 宽的图像。是什么赋予了?添加尺寸属性也没有效果。我引用了这个article

在这里演示:http://jsfiddle.net/7ek62m13/1/

【问题讨论】:

    标签: html srcset


    【解决方案1】:

    您以正确的方式使用 srcset。 Srcset 适用于您拥有大图像并且在较小设备上拥有较小格式的情况。如果您加载最大的图像,则无需加载另一个较小的图像(因为 srcset 用于相同的图像)。这导致当您在手机上打开此代码时,它将显示最小的图像,但当您在桌面上时,它将打开常规图像。如果您再次升级浏览器,srcset 会将您的图像替换为更大的图像,但它永远不会换回较低的图像。我希望我让它更清楚一点。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-03-15
    • 2016-10-21
    • 2020-07-31
    • 1970-01-01
    • 2017-11-09
    • 1970-01-01
    • 2016-08-01
    相关资源
    最近更新 更多