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;

版权声明：本文为博主原创文章，未经博主允许不得转载。