Question

我试图在srcset中选择两个图像：如果屏幕小于1120px，我想得到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中选择图像

1 个答案: