CSS制作响应式正方形及其应用

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;