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. [Err] 1449 - The user specified as a definer ('student'@'%') does not exist

    1.错误描述 [SQL]use student; 受影响的行: 0 时间: 0.001s [SQL] call alter_student('t_student','MODIFY COLUMN `we ...

  2. CBUS转MQTT

    CBUS转MQTT,楼宇控制协议通过迈思德网关转MQTT

  3. ss-libev 源码解析udp篇 (2)

    UDP relay的代码基本都在udprelay.c中,无论ss-local还是ss-server的代码都在一起,使用宏MODULE_LOCAL,MODULE_REMOTE等区分开.代码虽然不是很多, ...

  4. 如何制作dll库的API文档，自动生成微软风格的chm文件 Sandcastle Help File Builder 使用方法

    当你开发了一个库的时候,就需要给库开发一个api文档,微软提供了一个C#库的自动生成工具.我在使用的过程中记录了相关的信息,以供大家学习和查阅,如有不正之处,欢迎指出. 首先先下载一个软件,下载地址在 ...

  5. ZooKeeper 学习资料积累

    跟着实例学习ZooKeeper的用法: 临时节点 跟着实例学习ZooKeeper的用法: 缓存 跟着实例学习ZooKeeper的用法: 队列 跟着实例学习ZooKeeper的用法: Barrier 跟 ...

  6. 关于鼠标不敏感导致自以为ubuntu很怪的问题

    你要相信自己拥有的确实是一个垃圾鼠标,而不要以为复制和粘贴有感觉控制不住.

  7. Git详解之五 分布式Git

    以下内容转载自:http://www.open-open.com/lib/view/open1328070090108.html 分布式 Git 为了便于项目中的所有开发者分享代码,我们准备好了一台服 ...

  8. Mysql按照字段值做分组行转列查询

    今天做个后台服务,有个需求是批量生成一批表的数据,如果用BulkInsert会提升很大一截提交效率,但是如果用循环构造提交的Datable,则算法开销太高,所以用这种查询批量查出符合格式的DataTa ...

  9. Hadoop1.x安装配置文件及参数说明

    一.常用文件及参数说明Core-site.xml       配置Common组件的属性 hdfs-site.xml         配置hdfs参数,比如备份数目,镜像存放路径 Mapred-sit ...

  10. SQL server无法连接，服务无法启动

    Windows 不能在 本地计算机 启动 SQL Server 服务 错误代码126 在使用SQL2005(或2008)是可能会遇到错误提示: “Windows 不能在 本地计算机 启动 SQL Se ...