首先，CSS寬度和高度等比是指元素的寬度和高度成比例的變化。具體而言，當(dāng)我們改變?cè)氐膶挾葧r(shí)，元素的高度也會(huì)隨之相應(yīng)地改變。
要實(shí)現(xiàn)CSS寬度和高度等比，我們可以使用CSS中的“padding-top屬性”。例如，我們可以將一個(gè)元素的padding-top值設(shè)置為百分比，使其與元素的寬度成比例（假設(shè)寬度是300px，則padding-top值設(shè)置為100%，高度為300px）。
下面是一個(gè)例子，我們將一個(gè)標(biāo)簽設(shè)置為正方形的形狀，其中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來創(chuàng)建一個(gè)具有高度的容器。在容器中，我們使用了padding-top:100%，讓高度等于父級(jí)元素的寬度。最后，我們將圖片的max-width和max-height設(shè)置為100%，使它可以適應(yīng)容器大小。
通過使用這種方式，我們可以實(shí)現(xiàn)元素的寬度和高度的等比變化。這可以用于制作響應(yīng)式布局，以及其他需要定比例的元素的情況。