Html响应式图片

Posted on 2020-05-26 17:24  张雪冬前端学习园地  阅读(345)  评论(0)  编辑  收藏  举报

Html响应式图片

 

 

1.介绍：根据屏幕匹配的不同尺寸显示不同图片，picture 元素允许我们在不同的设备上显示不同的图片，一般用于响应式

<!-- 在不同的屏幕尺度下显示不同的图片 -->

<picture>

    <source media="(min-width: 500px)" srcset="./images/timg.jpg">

    <source media="(min-width: 301px)" srcset="./images/niao.jpg">
    <img src="./images/touxiang.png" alt="">

</picture>