首先，CSS宽度和高度等比是指元素的宽度和高度成比例的变化。具体而言，当我们改变元素的宽度时，元素的高度也会随之相应地改变。
要实现CSS宽度和高度等比，我们可以使用CSS中的“padding-top属性”。例如，我们可以将一个元素的padding-top值设置为百分比，使其与元素的宽度成比例（假设宽度是300px，则padding-top值设置为100%，高度为300px）。
下面是一个例子，我们将一个标签设置为正方形的形状，其中padding-top值和宽度成比例：
在上面的例子中，我们使用了伪元素:before来创建一个具有高度的容器。在容器中，我们使用了padding-top:100%，让高度等于父级元素的宽度。最后，我们将图片的max-width和max-height设置为100%，使它可以适应容器大小。
通过使用这种方式，我们可以实现元素的宽度和高度的等比变化。这可以用于制作响应式布局，以及其他需要定比例的元素的情况。
要实现CSS宽度和高度等比，我们可以使用CSS中的“padding-top属性”。例如，我们可以将一个元素的padding-top值设置为百分比，使其与元素的宽度成比例（假设宽度是300px，则padding-top值设置为100%，高度为300px）。
下面是一个例子，我们将一个标签设置为正方形的形状，其中padding-top值和宽度成比例：
span {
width: 300px;
position: relative;
display: block;
}
<br>
span:before {
content: "";
display: block;
padding-top: 100%;
}
<br>
span > img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}在上面的例子中，我们使用了伪元素:before来创建一个具有高度的容器。在容器中，我们使用了padding-top:100%，让高度等于父级元素的宽度。最后，我们将图片的max-width和max-height设置为100%，使它可以适应容器大小。
通过使用这种方式，我们可以实现元素的宽度和高度的等比变化。这可以用于制作响应式布局，以及其他需要定比例的元素的情况。