cloudinary 中响应式图像的 Srcset

Question

我正在尝试让我的图片响应。我想使用宽度为 300 且视口低于 768px 的图像和宽度为 1000 且视口大于 768px 的图像。我试过使用 max-width 属性等，但它们毫无意义。

<img srcset="https://res.cloudinary.com/xxx/image/upload/w_300,f_auto,q_auto,c_scale/v16242113131341/pc-template10_bzbdfk.webp 768w,  
             https://res.cloudinary.com/xxx/image/upload/w_900,q_auto,c_scale/v1624131231341/pc-template10_bzbdfk.webp 900w"    
             src='https://res.cloudinary.com/xxx/image/upload/q_auto,c_scale/v1624131231341/pc-template10_bzbdfk.webp' alt="PC" class="pctemplateforvideo" />

Answer 1

您还需要定义 sizes 属性。请查看 Mozilla 的 document，它提供了很好的解释

其次，如果您想获得高达 768 像素的低分辨率图像，作为最佳实践，建议您也提供 768 像素，以避免放大图像。这是它的示例代码：

<img srcset="https://res.cloudinary.com/xxx/image/upload/w_300,f_auto,q_auto,c_scale/v16242113131341/sample 300w,  
             https://res.cloudinary.com/xxx/image/upload/w_900,q_auto,c_scale/v1624131231341/sample 900w"
     sizes="(max-width: 768px) 300px,
            900px"
     src='https://res.cloudinary.com/xxx/image/upload/w_900,q_auto,c_scale/v1624131231341/sample' alt="PC" class="pctemplateforvideo" />

cloudinary 中响应式图像的 Srcset

Srcset for responsive images in cloudinary

reactjs

cloudinary