用于云中响应式图像的 Srcset答案

【问题标题】：Srcset for responsive images in cloudinary用于云中响应式图像的 Srcset
【发布时间】：2021-09-05 05:36:14
【问题描述】：

我正在尝试使我的图像具有响应性。我想使用宽度为 300 的图像，任何视口低于 768 像素，宽度为 1000 的图像，任何视口高于 768 像素。我尝试过使用 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" />

【问题讨论】：

我也有这个问题

标签： reactjs cloudinary

【解决方案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" />

【讨论】：