使用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。

Answer 1

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