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

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

<div class="img-box"></div>

?

1 2 3 4 5 6 7 8 9

.img-box{ height:0; padding-bottom:100%; overflow:hidden; width:100%;//可以是个固定值 项目里用的百分比 background-size:100% 100%； background-position:center center; background-repeat:no-repeat;<br>background-image:url(...../...png); }

最终效果就是等比的四四方方的图标.....

 

参考原文：https://ruby-china.org/topics/17011