在 srcset 中选择图像

Question

我正在尝试在 srcset 中的两个图像之间进行选择：如果屏幕小于 1120 像素，我想要 image_a.jpg；如果更大，我要image_b.jpg。我正在尝试弄清楚如何执行此操作，但 reading the documentation 我无法确切地知道。这应该很容易，我最好的尝试是：

<div 
src="image_a.jpg" 
srcset="image_b.jpg 1121px" 
alt="My image">

有人知道怎么做吗？

Answer 1

如果您使用 srcset，浏览器会捕获最适合的图像。但是您的 HTML 需要 <img> 而不是 <div>。每个图像都需要以像素为单位的宽度（720w ...）。另外，您可以为不同的视口添加尺寸。在我的示例中，图像在小视口上是整个屏幕宽度，在较宽的视口上是较小的列。示例：

<img 
src="storage/_processed_/f0396ca7ab.jpg"     
srcset="storage/_processed_/4f9d1ad698.jpg 520w,
    storage/_processed_/ab73a280b5.jpg 720w,
    storage/_processed_/8613bd3302.jpg 940w,
    storage/_processed_/164f576264.jpg 1140w,
    storage/_processed_/3a7536450d.jpg 1440w,
    storage/_processed_/7466e52f7a.jpg 1980w" 
class="img-responsive" 
sizes="(min-width: 992px) 255px,
    (min-width: 768px) calc(100vw - 60px),
    calc(100vw - 60px)" 
alt="">

在 srcset 中选择图像

Choosing images in srcset

html

srcset