自己根据项目需要，把代码摘了出来

<div class="img-box"></div>

.img-box{

height:0;

padding-bottom:100%;

overflow:hidden;

width:100%;//可以是个固定值 项目里用的百分比

background-size:100% 100%；

background-position:center center;

background-repeat:no-repeat;
background-image:url(...../...png);

}　

最终效果就是等比的四四方方的图标.....

参考原文：https://ruby-china.org/topics/17011

【转载】图片 CSS：怎样才能 “响应式 + 固定宽高比例”？的更多相关文章

  1. Gradify - 提取图片颜色，创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  2. CSS 与 HTML5 响应式图片

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

  3. CSS与HTML5响应式图片

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

  4. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  5. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  6. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  7. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  8. 点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  9. css 动画 和 响应式布局和兼容性

    14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transfo ...

随机推荐

  1. Screen、IP

    主要内容 Screen 安装screen [root@TS-DEV ~]# yum install screen [root@TS-DEV ~]# rpm -qa|grep screen screen ...

  2. oracle 中top-n的使用

    对于ms sqlserver数据库中可以直接使用top(n)提取前N 个结果,而oracle中并不能直接使用的.oracle中提供了对于提取前N 条的结果的方法  那就是用行编号 例如:select ...

  3. 「雅礼集训 2017 Day2」解题报告

    「雅礼集训 2017 Day2」水箱 我怎么知道这种题目都能构造树形结构. 根据高度构造一棵树,在树上倍增找到最大的小于约束条件高度的隔板,开一个 \(vector\) 记录一下,然后对于每个 \(v ...

  4. 在window主机上访问virtualbox虚拟机上centos7的tomcat服务

    在virtualbox上装完centos7后,随后装了tomcat服务器,然后在主机上发现用google浏览器访问tomcat不了 于是用ping检测下,发现ping不通,经过多方查找,才配置好,于是 ...

  5. zookeeper客户端命令详解

    今天同事突然向看一下zookeeper中都创建了哪些节点,而我本人对zookeeper的客服端命令了解的很少,有些操作竟然不知道怎么用,于是乎就索性整理一下zookeeper客服端命令的使用,并再此记 ...

  6. spring cloud 学习(6) - zuul 微服务网关

    微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService.ProductService.UserService...,为了让调用更简单,一般会在这些服务前端再封装一层,类似下 ...

  7. centos7 初始化脚本

    #!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...

  8. BIND DNS拒绝服务漏洞 CVE-2016-2776修复

    接到此漏洞之后,略微查了一下相关描述,发现漏洞影响范围很大,可能造成的影响也很严重,于是着手进行修复. 漏洞的详细信息可见如下链接: http://www.cnvd.org.cn/flaw/show/ ...

  9. WebForm——JS检测浏览器是否是IE浏览器

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 && userAgen ...

  10. odoo开发笔记--模型字段compute用法

    compute属性,实现的主要功能是,前端界面选择某个字段的时候,指定与该字段关联的其他字段可以关联,并联动的显示. 可以和inverse属性同时使用,不加inverse属性的话,前端界面的显示效果只 ...