[分享]css中如何让高等于宽

在CSS中，有多种方法可以让一个元素的高等于宽。下面我们将介绍其中的两种方法。一种方法是使用“paddingtop: 100”属性。这个属性的意思是让元素上边距的高度等于元素宽度的100。也就是说，如...

在CSS中，有多种方法可以让一个元素的高等于宽。下面我们将介绍其中的两种方法。
一种方法是使用“padding-top: 100%”属性。这个属性的意思是让元素上边距的高度等于元素宽度的100%。也就是说，如果元素的宽度是100px，那么这个属性将会让元素的上边距高度也是100px。只需将这个属性应用到一个正方形容器上，就可以创建一个高等于宽的容器，如下所示：

<div class="square"></div>

<style>
  .square {
    width: 100px;
    padding-top: 100%;
  }
</style> 

上面的代码将会创建一个100px×100px的正方形容器。
另一种方法是使用“position: relative”和“padding-bottom: 100%”属性。这个方法的原理是让元素的底边距高度等于元素宽度的100%。同样是将这个属性应用到一个正方形容器上，如下所示：

<div class="square"></div>

<style>
  .square {
    width: 100px;
    position: relative;
    padding-bottom: 100%;
  }
</style> 

上面的代码同样会创建一个100px×100px的正方形容器。
无论使用哪种方法，都能够让元素的高等于宽，这种效果可以被用于制作各种形状的图形，例如圆形、三角形等等，只需在容器上应用不同的CSS属性即可实现。
代码可能会比较长，为了避免影响阅读体验，我们在下面使用pre标签展示代码部分。

<pre>
<div class="square1"></div>

<style>
  .square1 {
    width: 100px;
    padding-top: 100%;
  }
</style>

<div class="square2"></div>

<style>
  .square2 {
    width: 100px;
    position: relative;
    padding-bottom: 100%;
  }
</style>