简述CSS实现自适应正方形、等宽高比矩形 ？
参考回答
在CSS中，实现自适应的正方形或等宽高比矩形，可以通过使用百分比、padding技巧或aspect-ratio属性来实现。这些方法可以帮助元素在不同的屏幕和容器宽度下保持相对比例。
详细讲解与拓展
1. 使用 padding 技巧实现自适应正方形
通过设置元素的 padding-top 或 padding-bottom 为百分比，可以创建一个响应式的正方形。这个技巧的原理是利用百分比的相对高度，因为百分比是相对于父元素宽度计算的。
示例：
.square {
width: 100%;
padding-top: 100%; /* 高度等于宽度 */
background-color: lightblue;
}
在这个例子中：
– width: 100%：元素的宽度是父容器的100%。
– padding-top: 100%：高度通过padding-top设置为与宽度相等，从而确保了元素保持正方形比例。
这种方法使得元素始终保持正方形的宽高比，无论容器大小如何变化。
2. 使用 aspect-ratio 属性实现正方形或等宽高比矩形
从CSS3开始，aspect-ratio属性被引入，它允许你直接设置元素的宽高比。通过设置该属性，浏览器会自动调整元素的高度以保持指定的宽高比。
aspect-ratio: 1 / 1;实现正方形。aspect-ratio: 16 / 9;实现16:9的矩形。
示例：
.square {
width: 100%; /* 宽度是父容器的100% */
aspect-ratio: 1 / 1; /* 宽高比为1:1，确保正方形 */
background-color: lightcoral;
}
在这个例子中，aspect-ratio为1 / 1，确保元素在任何宽度下都保持正方形的比例。
示例：等宽高比矩形（如16:9）
.rectangle {
width: 100%; /* 宽度是父容器的100% */
aspect-ratio: 16 / 9; /* 宽高比为16:9 */
background-color: lightgreen;
}
在这个例子中，元素的宽高比为16:9，浏览器会自动调整高度来保持该比例。
总结
padding技巧：通过设置padding-top为百分比，可以在宽度变化时保持元素的正方形比例。aspect-ratio：新引入的CSS属性，可以直接设置元素的宽高比，浏览器会自动调整元素的高度以维持该比例。适用于正方形和等宽高比矩形。
这两种方法都能实现响应式的正方形或等宽高比矩形，可以根据需要选择适合的方式。