css height widthと同じ

CSS 高度宽度相同技巧：解锁完美正方形布局

本文详细介绍了如何使用 CSS 实现元素高度和宽度相同的技巧，涵盖多种方法及其适用场景，助你轻松打造完美正方形布局。

1. 利用 `padding-top` 或 `padding-bottom` 百分比值

`padding-top` 或 `padding-bottom` 的百分比值是相对于父元素的宽度计算的，即使其父元素没有明确设置宽度，也会根据内容自动计算出一个宽度。

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

.square {
  width: 200px;
  height: 0;
  padding-top: 100%;
  background-color: lightblue;
}

适用于高度未知或需要动态调整的情况。

`vw` 视窗单位表示视窗宽度的百分比，`1vw` 等于视窗宽度的 `1%` 。因此，设置相同的 `vw` 值可以使元素高度和宽度始终保持一致。

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

.square {
  width: 50vw;
  height: 50vw;
  background-color: lightgreen;
}

适用于需要根据视窗大小自适应调整的场景。

`aspect-ratio` 属性允许直接设置元素的宽高比，通过设置值为 `1 / 1` 可以轻松实现高度宽度相同的效果。

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

.square {
  width: 200px;
  aspect-ratio: 1 / 1;
  background-color: lightcoral;
}

适用于现代浏览器，是最直观简洁的方法。浏览器兼容性请参考 Can I use aspect-ratio

使用 JavaScript 获取元素的宽度，并将其赋值给元素的高度，从而实现高度宽度相同。

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

const square = document.querySelector('.square');
square.style.height = square.offsetWidth + 'px';

.square {
  width: 200px;
  background-color: lightyellow;
}

适用于需要更灵活的控制或需要兼容旧版浏览器的场景，例如需要根据其他元素的尺寸动态调整正方形大小。

本文介绍了四种实现 CSS 高度宽度相同的方法，每种方法都有其优缺点和适用场景。

根据实际项目需求选择最合适的方法，可以轻松打造出完美的正方形布局。

因为 `padding` 的百分比值是相对于父元素的宽度计算的，如果 `height` 不为0，则最终的高度会是 `height` 加上计算出的 `padding` 值，导致高度不等于宽度。

`vw` 视窗单位始终相对于视窗宽度计算，而百分比则相对于父元素计算。

目前大多数现代浏览器都支持 `aspect-ratio` 属性，但部分旧版浏览器可能不支持。您可以参考 Can I use aspect-ratio 网站查看详细的浏览器兼容性信息。