html - 使用 img srcset 的响应式图像

Question

我在理解它是如何工作/应该如何工作时遇到了一些麻烦。

下面是生成的代码，为了便于阅读，我添加了一些换行符和空格。

<img 
    srcset="https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/338x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?mobile_0.8701242290003701 1534w, 
    https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/446x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?tablet_0.9660079932306127 1536w, 
    https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/568x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg?desktop_0.3538608252974025 1986w, " 

    sizes="(max-width: 767px) 1534px, 
    (min-width: 768px) 1536px, 
    (min-width: 993px) 1986px, " 
    src="https://staging-lorem.s3.amazonaws.com/media/catalog/product/cache/small_image/568x/fe048ded4c6db6c6afa45b749bc258ce/3/0/30007351100_st.jpg" 
    alt="" />

我想使用 img 元素、srcSet 和 src 来支持旧版浏览器。（所以没有图片元素）

使用 Safari 和 xCode Simulator 进行检查，似乎出于某种原因同时下载了桌面版和移动版？

由于后端性能限制，我们将只提供视网膜图像，必须生成大量不同尺寸的图像。

此特定图像在移动设备上的显示尺寸约为屏幕的 50%，在平板电脑上为 1/3，在台式机上不到 1/4。

标签： htmlsrcset

Answer 1

我刚刚删除了该sizes属性，然后它按预期工作：P