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

<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自动化开发 - 模块与包

    本节内容 一.模块  1.import module 2.from module  import 3.from module  import * 4.模块的__name__属性 5.模块搜索路径 6. ...

  2. [php]PHP_函数收集

    //http://php.net/manual/en/control-structures.break.php //break ends execution of the current for, f ...

  3. ReportMachine常见问题

    ReportMachine常见问题 2012-06-22 12:26:50|  分类: Delphi|举报|字号 订阅     下载LOFTER我的照片书  |     1.不打印特定的MemoVie ...

  4. 使用EF操作Oracle数据库小计

    1.建表 CREATE TABLE item.ORDERS( ORDERID ) CONSTRAINT PK_ORDERS PRIMARY KEY, ORDERNO ), STOREID ), STO ...

  5. [转载]DevOps建立全生命周期管理

    全生命周期管理(ALM)领域作为企业DevOps实践的总体支撑,应该说是DevOps领域中最为重要的实践领域,也是所有其他实践的基础设施.现在很多企业都非常重视CI/CD自动化工具的引入和推广,但是对 ...

  6. python 使用json格式转换

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  7. jzoj4229

    按照題意暴力模擬即可 #include<bits/stdc++.h> using namespace std; int m; typedef long long ll; ll a1,q,n ...

  8. ST表的原理及其实现

    ST表类似树状数组,线段树这两种算法,是一种用于解决RMQ(Range Minimum/Maximum Query,即区间最值查询)问题的离线算法 与线段树相比,预处理复杂度同为O(nlogn),查询 ...

  9. 防止活动上线时 微信openid 被伪造的解决办法

    背景 前不久上线了一个 campaign 项目,一个 h5,后端为php,用户可以在微信中通过网页授权的方式登录,然后用微信 openid 作为唯一标识符进行签到和抽奖的操作. 结果后期出现了很多脏数 ...

  10. Mybatis 逆向工程学习随笔

    一.逆向工程的作用 简单来说,就是替我们生成Java代码. 之前使用Mybatis的Mapper代理方法开发,还需要自己创建实体类,而且属性还得和数据库中的字段对应.这着实是机械化的而且比较麻烦的事, ...