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>
