这里介绍7种方法,仅供参考。
1、vm单位
<div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面。</div> .square-shape { width: 50%; height: 50vw; border: 1px solid #f00; }
2、padding-top实现
<div class="square-shape">这是一个可以自适应的正方形,设置高度避免被内容撑开多余的高度。奇怪的是,内容在框框外面。</div> .square-shape { width: 50%; height: 0; padding-top: 50%; border: 1px solid #f00; }
3、padding-bottom实现
<div class="square-shape">这是一个可以自适应的正方形,此法很好用,有内容也是正方形。</div> .square-shape { width: 30%; height: 0; padding-bottom: 30%; border: 1px solid #f00; }
4、伪元素的margin-top
<div class="square-shape">这里如果有内容,就不是正方形喽,限制height也没有用。</div> .square-shape { width: 100%; overflow: hidden; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; margin-top: 100%; }
5、伪元素的padding-top
<div class="square-shape">这里如果有内容,就不是正方形喽。</div> .square-shape { width: 30%; max-width: 200px; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-top: 100%; }
6、子元素margin-top
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape{ overflow: hidden; width: 50%; background-color: black; } .content{ margin-top: 100%; }
7、伪元素的padding-bottom,内嵌absolute元素
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape { width: 50%; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-bottom: 100%; } .content { position: absolute; width: 100%; height: 100%; }