css响应式布局设置子元素高度和宽度一样

css响应式布局设置子元素高度和宽度一样

常常遇到响应式布局 其中父元素（类名为.list）包含多个子元素（类名为.item），每个子元素中显示一张图片，并且这些图片能够根据子元素的宽度和高度进行自适应调整。

解决方案：

• 给 .item 设置 aspect-ratio: 1 / 1; 强制宽高比为1:1，它强制.item的宽高比为1:1，即无论父元素如何变化，.item的高度都会自动调整为与其宽度相同，以保持固定的宽高比。
  aspect-ratio文档

  <!-- ...css代码... -->.list {width: 100%;display: flex;margin-top: 12px;gap: 10px;}.item {width: 33.33%;position: relative;aspect-ratio: 1 / 1; /* 关键属性：强制宽高比 1:1 */}.item img {width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}<!-- html代码 --><div class="list"><div class="item"><img src="XXX" alt="图片预览"  /></div><div class="item"><img src="XXX" alt="图片预览"  /></div><div class="item"><img src="XXX" alt="图片预览"  /></div></div>