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

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