Html响应式图片

Html响应式图片

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

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

<picture>

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

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

</picture>