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

Question

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

<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;
}