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

Question

I used this code below to use different size image set for different screen size, it works good in firefox and chrome but not wordks in safari. Is there any solution? My code:

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

I want solution using html/css/js

Answer 1

Use Media tag with size and use below code

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

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