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

<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. Android-xliff

    先看以下这个案例,然后在分析: string.xml 使用xliff,需要导入命名空间 xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2& ...

  2. Java 学习的几个基础实验(Learn by doing)

    0 引子 不少情况下,学生连开发环境都搭建不好,有了实验楼,这个问题基本就解决了. 实验楼是国内首家IT在线实训平台,拥有最丰富的计算机在线实验课,而且全部免费.创业团队对师生的服务非常贴心细致. 1 ...

  3. 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

    第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Mo ...

  4. jQuery小案例

    Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script ty ...

  5. MariaDB 单表查询与聚合(5)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  6. [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined

    使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...

  7. Linux - 更改软件源

    镜像源 网易镜像源 在网易开源镜像页面,点击对应镜像名的使用帮助,可以查看到更新源的方法,按步骤操作即可. 阿里云镜像源 在阿里云开源镜像页面,点击对应Mirror分类的help标签,可以查看到更新源 ...

  8. python学习笔记14-函数

    使用关键字def来创建函数  注意缩进 函数命名规则: 1.必须以下划线或者字母开头 2.区分大小写 3.不能是保留字 调用函数一定记得加括号 def print_info(name,age) pri ...

  9. iOS-iOS9系统SEGV_ACCERR问题处理【v3.6.3的一些bug修复】

    前言 最近APP不断地更新版本,却发现一些未知的错误导致崩溃,我把能测出来的错误,全部修复了,因为项目里集成了腾讯Bugly,看了下后台的崩溃,依旧千篇一律啊,然后就纠结了,很多SEGV_ACCERR ...

  10. POJ 2606

    #include<iostream> #include<set> #include<stdio.h> #include<math.h> #include ...