Srcset 在每个屏幕尺寸下显示全尺寸图像

Question

我正在尝试掌握将 srcset 用于响应图像的窍门，并且到目前为止......

    <img
        src="https://dummyimage.com/1500x300/2a9c2a/ffffff"
        srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff 1200w,
                https://dummyimage.com/992x300/2a9c2a/ffffff 992w,
                https://dummyimage.com/768x300/2a9c2a/ffffff 768w,
                https://dummyimage.com/576x300/2a9c2a/ffffff 576w"
        sizes="(max-width: 1200px) 1200px,
               (max-width: 992px) 992px,
               (max-width: 768px) 768px,
               (max-width: 576px) 576px,
               1500px
    ">

我希望它在我的屏幕低于 576px 时显示 576px 宽图像，当它低于 768px 时显示 768px 等等

它只是在每个屏幕尺寸上显示完整尺寸的 1500 像素版本，我哪里出错了？

Answer 1

如果您想根据您的 viewport 发送图片，我建议您使用 picture 元素。

<picture>
  <source srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff" media="(min-width: 1200px)" />
  <source srcset="https://dummyimage.com/992x300/2a9c2a/ffffff" media="(min-width: 992px)" />
  <source srcset="https://dummyimage.com/768x300/2a9c2a/ffffff" media="(min-width: 768px)" />
  <source srcset="https://dummyimage.com/576x300/2a9c2a/ffffff" media="(min-width: 576px)" />
  <img src="https://dummyimage.com/576x300/2a9c2a/ffffff" />
</picture>

Srcset 在每个屏幕尺寸下显示全尺寸图像

Srcset displaying full size image at every screen size

css

srcset