針對不同屏幕的不同圖片

Question

我遇到了問題！我在我的html中使用<picture>，我現在看到它在Safari和IE中不受支持。我有一個瀏覽器max-width: 660px的圖像和瀏覽器min-width: 660px的新圖像。有沒有人有關於如何做到這一點的建議？

Answer 1

img { 
 
    max-width: 100%; 
 
}

<picture> 
 
    <!-- Use CSS media queries in media attribute (this will show for screens less than 661px) --> 
 
    <source srcset="http://lorempixel.com/660/200" media="(max-width: 660px)"> 
 

 
    <!-- Default image (this will show for screens greater than 660px) --> 
 
    <source srcset="http://lorempixel.com/1200/400"> 
 

 
    <!-- Use this image if <picture> element isn't supported --> 
 
    <img src="http://lorempixel.com/1200/400" /> 
 
</picture>