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"
    
alt="">

  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;" alt="">
    
</picture>

html中的响应式图片的更多相关文章

  1. bootstrap中如何让响应式图片（img-responsive）水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  2. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  3. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  4. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

  5. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  6. bootstrap-内联表单 水平（横向）表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. CSS 与 HTML5 响应式图片

    什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...

  8. CSS与HTML5响应式图片

    随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...

  9. bootstrap快速入门笔记（八）-按钮，响应式图片

    一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...

随机推荐

  1. select2切换事件如何生效

    1.问题背景 利用select2生成可搜索下拉框,并且绑定切换事件:但是直接绑定change事件,发现不起作用 2.问题原因 <!DOCTYPE html> <html> &l ...

  2. C# 读写opc ua服务器，浏览所有节点，读写节点，读历史数据，调用方法，订阅，批量订阅操作

    OPC UA简介 OPC是应用于工业通信的,在windows环境的下一种通讯技术,原有的通信技术难以满足日益复杂的环境,在可扩展性,安全性,跨平台性方面的不足日益明显,所以OPC基金会在几年前提出了面 ...

  3. HDU - 5942 :Just a Math Problem (莫比乌斯)

    题意:略. 思路:问题转化为1到N,他们的满足mu[d]!=0的因子d个数.  即1到N的因子的莫比乌斯系数平方和. (经验:累加符号是累加的个数,我们把常数提到前面,然后用杜教筛累加个数即可. ht ...

  4. BZOJ4602 Sdoi2016 齿轮 【带权并查集】*

    BZOJ4602 Sdoi2016 齿轮 Description 现有一个传动系统,包含了N个组合齿轮和M个链条.每一个链条连接了两个组合齿轮u和v,并提供了一个传动比x : y.即如果只考虑这两个组 ...

  5. MAC OS环境下搭建基于Python语言的Selenium2自动化测试环境

    #1安装Python Mac OS上自带python2.7,在此介绍安装python3.x版本 去官网下载Python for MAC版本 https://www.python.org 安装文件为pk ...

  6. phoenix 使用activerecord模式框架ecto 访问数据库

    备注:    需要先安装mysql 以及phoenix 框架,测试使用的是docker 进行安装,具可以参考代码    1. 创建项目 mix phx.new first --database mys ...

  7. uva 11237 - Halloween treats(抽屉原理)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/37612503 题目链接:uva 11237 ...

  8. worldpress自定义页面

    一:wordpress制作自定义页面的方法 有时候我们需要制作一些个性化的页面,而不是直接用wordpress的page页面模板.这时候我们就需要自已写一个页面出来.下面介绍一下制作流程: 第一步:制 ...

  9. (转)Linux查看CPU,硬盘,内存的大小

         分类: linux(21)  在Linux的桌面版本中,查看这些东西的确很方便,有图形化的工具可以使用.但是在Linux服务器版上,或者远程ssh连接的时候,就没有图形化的界面可以操作了.此 ...

  10. laravel Auth token创建于使用

    token 的创建和使用, https://laravelacademy.org/post/3640.html 用户表密码字段验证修改,不只是password https://www.jianshu. ...