码迷,mamicode.com
首页 > Web开发 > 详细

Html响应式图片

时间:2020-05-26 18:16:37      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:不同   media   图片   code   --   htm   min   元素   尺寸   

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>

 

Html响应式图片

标签:不同   media   图片   code   --   htm   min   元素   尺寸   

原文地址:https://www.cnblogs.com/zxuedong/p/12966839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!