【转载】图片 CSS：怎样才能 “响应式 + 固定宽高比例”？

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

<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