如何根据屏幕尺寸使用不同尺寸的图像集？

Question

我使用下面的代码为不同的屏幕尺寸使用不同尺寸的图像集，它在 firefox 和 chrome 中运行良好，但在 safari 中不适用 wordks。有什么解决办法吗？我的代码：

<picture>
<img src="static/images/content/roni.jpg"
srcset="static/images/content/roni_mobile.jpg 420w,
        static/images/content/roni_landscape.jpg 700w,
        static/images/content/roni_tablet.jpg 1056w,
        static/images/content/roni.jpg 1937w"/>
</picture>

我想要使用 html/css/js 的解决方案

Answer 1

使用具有大小的媒体标签并使用以下代码

.blogpost img {
width:55%;
min-width:220px;
}

.blogpost img {
width:100%;
max-width:600px;
}