css3 height等于width

CSS3中，height等于width是一种非常有用的属性设置方式。

div {
      width: 200px;
      height: 200px;
}

上述代码中，div元素的width和height属性都设置为200px。如果我们想让div元素保持一个正方形，就需要使用height等于width的属性设置方式：

div {
      width: 200px;
      height: 0;
      padding-bottom: 100%;
      position: relative;
}
div img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}
    

上述代码中，我们将div元素的height属性设置为0，并使用padding-bottom属性设置 div元素的高度为宽度的百分之一百。然后，我们在div元素内部设置一个img元素，将它的宽度和高度都设置为100%，这样就可以使图片保持一个正方形。

这种方式非常适用于需要展示正方形图片的网站，可以让我们避免使用JavaScript来计算和调整元素的大小。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！