简述CSS实现自适应正方形、等宽高比矩形 ？

在CSS中，实现自适应正方形和等宽高比矩形可以通过使用百分比、视窗单位（vw/vh）或者flexbox布局等方式来实现。

1. 自适应正方形

要使一个元素呈现为正方形，需要确保它的宽度和高度相等。你可以通过设置宽度为100%，然后将高度设置为与宽度相同的值来实现这一点。但是，如果容器的宽度改变，高度不会自动调整。为了解决这个问题，你可以使用视窗单位（vw）或者padding-top技巧。

使用视窗单位（vw）:

.square {
    width: 50vw; /* 设置宽度为视窗宽度的50% */
    height: 50vw; /* 设置高度为视窗宽度的50% */
}

使用padding-top技巧:

.square {
    width: 50%; /* 设置宽度为父元素宽度的50% */
    padding-top: 50%; /* 设置padding-top为父元素宽度的50%，这会使元素的高度等于宽度 */
    position: relative; /* 设置为相对定位 */
}

.square-content {
    position: absolute; /* 设置为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

在这个例子中，.square-content元素用于在正方形内部放置内容。

2. 等宽高比矩形

要实现等宽高比矩形，你可以使用padding-top技巧，通过设置一个固定比例的padding-top来实现。

例如，如果你想要一个16:9的宽高比矩形，你可以这样做：

.rectangle {
    width: 100%; /* 设置宽度为100% */
    padding-top: 56.25%; /* 9/16 = 0.5625，所以padding-top为56.25% */
    position: relative; /* 设置为相对定位 */
}

.rectangle-content {
    position: absolute; /* 设置为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

在这个例子中，.rectangle-content元素用于在矩形内部放置内容。你可以通过调整padding-top的值来改变宽高比。