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

<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. activemq生产者和消费者的双向通信

    http://websystique.com/spring/spring-4-jms-activemq-example-with-jmslistener-enablejms/

  2. EBS环境提交新请求默认是"单一请求"

    http://blog.csdn.net/samt007/article/details/38304239 用过EBS的请求都知道,提交一个新报表都要点好几个按钮,其中一个很麻烦的就是选择提交新请求的 ...

  3. Android-WebView与本地HTML (Java调用--->HTML的方法)-(new WebView(this)方式)

    之前的博客,Android-WebView与本地HTML (Java调用--->HTML的方法),是在 findViewById(R.id.webview);,来得到WebView, 此博客使用 ...

  4. Android-Kotlin-代理和委托

    代理和委托,在生活中的案例有很多: 例如:小明工作很忙,需要办理银行卡,此时他委托给>>小李去给自己办理银行卡,小李来到办理中心 把自己的身份证/小李的身份证,给办理人员,说是小明委托我, ...

  5. Azure DevOps Server (TFS）中代码文件换行问题解决方案（Git)

    之前写过一篇博客"探索TFS Git 库文件换行(CRLF)的处理方式",主要是针对TFVC代码库的. 下面这篇文章说明如何在TFS的Git库中处理代码换行的问题. 概述 在Azu ...

  6. 探索基于.NET下实现一句话木马之ashx篇

    0x01 前言 在渗透测试的时候各种PHP版的一句话木马已经琳琅满目,而.NET平台下的一句话木马则百年不变,最常见的当属下面这句 笔者感觉有必要挖坑一下.NET平台里的一句话木马,经过一番摸索填坑终 ...

  7. IE9的「console未被定义」错误

    IE从IE8+才支持console物件,但如上图所示,网页明明是IE9标准模式,为什么IE9却说console物件不存在? 但进行侦错,console.log()却又正常! 原因: IE8/IE9要先 ...

  8. #loj3089 [BJOI2019]奥术神杖

    卡精度好题 最关键的一步是几何平均数的\(ln\)等于所有数字取\(ln\)后的算术平均值 那么现在就变成了一个很裸的01分数规划问题,一个通用的思路就是二分答案 现在来考虑二分答案的底层怎么写 把所 ...

  9. linux 的计划任务 定时任务

    linux的计划任务,也叫做定时任务 https://www.cnblogs.com/mingforyou/p/3930636.html 名字是crond 查看linux本机的定时任务 crontab ...

  10. 读书笔记--SQL必知必会--常用MySQL（MariaDB）命令及示例

    DBMS信息 显示DBMS的版本 select version(); 显示DBMS状态 status; 显示DBMS资源状态 show status; 显示DBMS支持的权限 show privile ...