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

<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. iOS开发—音乐的播放

    iOS开发—音乐的播放 一.简单说明 音乐播放用到一个叫做AVAudioPlayer的类,这个类可以用于播放手机本地的音乐文件. 注意: (1)该类(AVAudioPlayer)只能用于播放本地音频. ...

  2. PICT用户手册 [转]

    PICT 3.3 User's Guide Jacek Czerwonka, Test Lead, Microsoft Corporation Overview Using PICT to Combi ...

  3. SQL SERVER 索引视图

    创建: CREATE VIEW [dbo].[view_xxx] WITH SCHEMABINDING AS SELECT Table1.主键, Table1.外键 FROM Table1, Tabl ...

  4. oracle查询语句查询增加一列内容

    select a,sys_guid() as b from mytable sys_guid() 是生成带分隔符(-)的GUID的自定义函数 查询B表的内容插入A表,MY_ID是A表的主键不可为空,因 ...

  5. 【转】ABP webapi三种方式

    作者:圣杰 链接:https://www.jianshu.com/p/d14733432dc2 來源:简书 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1. 引言 上一节我们 ...

  6. Swift5 语言参考(二) 词法结构

    词汇结构 Swift 的词法结构描述了什么样的字符序列形成了语言的有效标记.这些有效令牌构成语言的最低级构建块,用于描述后续章节中的其余语言.令牌由标识符,关键字,标点符号,文字或运算符组成. 在大多 ...

  7. 关于AOP的PIAB

    AOP:面向切面编程,也就是在运行过程中,按照需要动态加载功能块 PIAB:含义可以从下面提取 Microsoft Patterns & Practices团队在2007年发布的Enterpr ...

  8. How To Scan QRCode For UWP (3)

    这一节主要介绍如何去设置MediaCapture拍照的分辨率. MediaCapture 包含一个 VideoDeviceController对象,凭借它可以控制摄像头的很多设置,其中包括设置拍照的分 ...

  9. Python爬虫实战四之抓取淘宝MM照片

    原文:Python爬虫实战四之抓取淘宝MM照片其实还有好多,大家可以看 Python爬虫学习系列教程 福利啊福利,本次为大家带来的项目是抓取淘宝MM照片并保存起来,大家有没有很激动呢? 本篇目标 1. ...

  10. ASP.NET Core 与 .NET Core 演变与基础概述

    https://github.com/dotnet/corehttps://github.com/aspnet/home 今天看到 .NET Core 的改名计划,感觉跨平台的时代快要来了,从之前的 ...