css 高度等于宽度

作者：殘月殺手发布日期:2025-05-24 浏览:50

/* 使用 padding-bottom 实现高度等于宽度 */
.square {
  width: 200px;
  height: 0;
  padding-bottom: 100%; /* 这里的百分比是相对于宽度的，所以宽度为200px时，高度也会是200px */
  background-color: lightblue;
}

/* 使用 aspect-ratio 属性（现代浏览器支持） */
.square-alt {
  width: 200px;
  aspect-ratio: 1 / 1; /* 宽高比为1:1，即高度等于宽度 */
  background-color: lightcoral;
}

解释说明：

使用 padding-bottom:
- 通过设置 height: 0 和 padding-bottom: 100%，可以实现一个正方形。padding-bottom 的百分比是相对于元素的宽度计算的，因此当宽度为 200px 时，padding-bottom: 100% 会使高度也变成 200px。
使用 aspect-ratio:
- aspect-ratio 是 CSS 中的一个新属性，可以直接指定元素的宽高比。对于正方形，宽高比为 1:1。这个方法更加直观和简洁，但需要注意浏览器兼容性。

上一篇：css隐藏table

下一篇：css rpx