首页 > itarticle > 响应式图片的处理

响应式图片的处理

admin 11月 11, 2020 0

如果需要在响应式网页设计中，针对不同的设备使用不同图片的话。可以利用HTML5新增的picture标签：

<picture> 
<source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
<source srcset="default.jpg, default_retina.jpg 2x">
<img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

另外，兼容性问题方面，可以使用polyfill: http://scottjehl.github.io/picturefill/

<picture> 
 
<source srcset="smaller.jpg" media="(max-width: 768px)"> 
<source srcset="default.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="default.jpg" alt="My default image"> </picture>