CSS制作响应式正方形？什么鬼？干嘛用的？干嘛用的没人有每人的需求，本人也正好是因为公司正在做的业务需要，想做个照片展示的功能（当然得符合响应式了）。而这个照片展示必须符合以下几点功能：1，用三张图片占满屏幕的一行；2，长宽比固定（暂时做成正方形）；3，保证图片不扭曲。
业务什么的这里暂时不谈，回到正题：利用CSS制作响应式正方形。响应式正方形，大部分第一想法肯定是设置宽度百分比，然后利用JS动态设置高度。性能什么的这里就不谈了，反正我是觉得比较麻烦，正如本人一直坚持的原则：CSS能实现的功能，为何要去麻烦JS？
废话不多说，，先上个代码：
<div class='container'><div class='content'>content</div></div>接下来是CSS部分：
.container{width:100%;position:relative;display: inline-block;}.container:after{content:'';display: block;margin-top: 100%;}.content{position:absolute;left:0;right:0;top:0;bottom: 0;<pre name="code" class="css">background-color: silver; }
有兴趣的童鞋可以去试试，这段代码的功能就是如上所说的响应式的正方形了。如果需要制作等比的长方形也是简单，把100%改成50，就变成了2:1的长方形了。
本来想把前文说过的业务实现代码贴出来的，但是觉得与题目不对应，就不罗嗦了，后期有时间直接做个DEMO出来供大家参考。结尾就就简单的说明一下这段代码的关键好了。这段代码一个很重要的特性在于margin-top：100%这段，官方说明：margin的百分比取值是根据父层元素的宽度来定的，所以margin：100%。正好可以制作一个正方形出来，再将子元素的四个角放到父元素中，子元素就成了一个正方形了。
background-color: silver;
版权声明：本文为博主原创文章，未经博主允许不得转载。
发光并非太阳的专利，我也可以发光 。
