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

html中的响应式图片

时间:2019-02-07 23:37:00      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:屏幕   tps   html   redo   static   https   dstat   doc   nfv   

html中的响应式图片

  1. img

    sizes 指定屏幕尺寸
    srcset 指定可以使用的图片和大小,多个使用逗号分隔,需要指定图片的真实宽度,个人觉得没有picture好用
    <img 
        sizes="(min-width: 1200px) 680px, (min-width: 640px) 500px, 300px"
        srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg 680w" 
    >
  2. picture

    <picture>
        <source media="(min-width: 1200px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg" />
        <source media="(min-width: 680px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549558311010&di=3f5e401100be857a9d7b13058d59d0b3&imgtype=0&src=http%3A%2F%2Fimg3.redocn.com%2F20120322%2FRedocn_2012031914403578.jpg" /> 
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3932493901,3759456434&fm=26&gp=0.jpg" style="width: auto;" >   
    </picture>

html中的响应式图片

标签:屏幕   tps   html   redo   static   https   dstat   doc   nfv   

原文地址:https://www.cnblogs.com/ye-hcj/p/10355674.html

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