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. Windows7下PHP 7.1搭建开发环境

    引言: PHP天生就是用来解决互联网时代的Web语言问题的专业工具,本文将记录在windows上搭建PHP的过程以及其中碰到的问题. 配置版本信息 OS: Windows 7 PHP: 7.1.7-n ...

  2. Android 编程 高德地图 （实现显示地图以及定位功能）

    本文参考文章: http://www.apkbus.com/blog-904057-63610.html 本人实现的 定位代码:(具体配置省略,可见参考文章) package com.example. ...

  3. 关于pycharm的激活码

    http://kadara.ru:1017 http://roothat.ru:1017 http://jetbrains.tencent.clickn http://idea.imsxm.com/  ...

  4. kubeadm搭建kubernetes集群之三：加入node节点

    在上一章<kubeadm搭建kubernetes集群之二:创建master节点>的实战中,我们把kubernetes的master节点搭建好了,本章我们将加入node节点,使得整个环境可以 ...

  5. 【解题报告】CF Round #320 (Div. 2)

    Raising Bacteria 题意:盒子里面的细菌每天会数量翻倍,你可以在任意一天放任意多的细菌,最后要使得某天盒子里面的细菌数量等于x,求至少要放多少个细菌 思路:显然,翻倍即为二进制左移一位, ...

  6. 树形DP新识

    HihoCoder: 1041(点) 1063(边) 1035(边) HDU1520 (签到) HDU2415(emm) 目前我遇到的树形DP有两类: ∂:点处理,大概就是点的乱搞,比如找一些点,这些 ...

  7. BZOJ2821 作诗(Poetize) 【分块】

    BZOJ2821 作诗(Poetize) Description 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI ...

  8. 淘宝npm镜像使用

    淘宝NPM镜像使用 镜像使用方法 1.config命令 npm config set registry https://registry.npm.taobao.org npm info undersc ...

  9. sailsjs 不用写代码就能生成rest api 代码

    1. 脚手架安装 npm install sails -g     2. 生成基本项目 a. 项目 sails new appdemo b. 创建api sails new api demoapi a ...

  10. Attribute的妙用 ---- 拦截器（过滤器）

    一.何为Attribute 下面是微软官方对Attribute的解释: 公共语言运行时允许你添加类似关键字的描述声明,叫做Attributes,它对程序中的元素进行标注,如类型.字段.方法和属性等.A ...