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

<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. 动态规划--求最大连续子数组的和（Python实现）&求解最大连续乘积字串（Python实现）

    def MaxSum(self,array,n): sum=array[0] result=array[0] for i in range(0,n): if sum<0: sum=a[i] el ...

  2. 深入探索AngularJS

    目录 深入探索AngularJS 作用域Scope是DOM和Directives交互的抽象 Scope是POJO对象 Scope是上下文 Scope继承树 Scope附加功能 正交功能 Element ...

  3. jQuery---ajax---error函数及其参数详解

    使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细说明了ajax中error函数和函数中各个参数的用法. 一般error函数返回的参数有三个 ...

  4. matplotlib可视化之如何给图形添加数据标签？

    当我们获取完数据之后,一般来说数据可视化呈现的最基础图形就是:柱状图.水平条形图.折线图等等,在python的matplotlib库中分别可用bar.barh.plot函数来构建它们,再使用xtick ...

  5. 【BZOJ5306】 [Haoi2018]染色

    BZOJ5306 [Haoi2018]染色 Solution xzz的博客 代码实现 #include<stdio.h> #include<stdlib.h> #include ...

  6. Deque（队列）

    目录 Deque 概述 特点 常用方法 双向队列操作 ArrayDeque Deque 概述 一个线性 collection,支持在两端插入和移除元素.名称 deque 是"double e ...

  7. [学习笔记]区间dp

    区间 \(dp\) 1.[HAOI2008]玩具取名 \(f[l][r][W/I/N/G]\) 表示区间 \([l,r]\) 中能否压缩成 \(W/I/N/G\) \(Code\ Below:\) # ...

  8. cad2014卸载/安装失败/如何彻底卸载清除干净cad2014注册表和文件的方法

    cad2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2014失败提示cad2014安装未完成,某些产品无法安装,也有时候想重新安装cad2014 ...

  9. linux只读文件系统

    一般方法如下 首先试下重新挂载行不行 mount -o remount,rw /dev/sda3 不行的话用fsck,具体方法如下 1. mount命令查看变成只读文件的位置,比如/dev/sda32 ...

  10. WebDriver高级应用实例（4）

    4.1操作web页面的滚动条 被测网页的网址: http://v.sogou.com Java语言版本的API实例代码 import org.testng.annotations.Test; impo ...