CSS是網(wǎng)頁設(shè)計中不可或缺的一部分，它能夠控制網(wǎng)頁的外觀和布局。當我們制作網(wǎng)頁時，常常需要創(chuàng)建圖片或者視頻的顯示區(qū)域。為了讓頁面更加美觀，我們通常需要保持這些區(qū)域的高與寬比例相等。

.example-img {
width: 400px;
height: 300px;
}

在上面的代碼中，我們設(shè)置了圖片區(qū)域的寬度為400px，高度為300px，這符合我們的設(shè)計要求。但是，如果我們的圖片因為某些原因需要更改大小，原本相等的高與寬比例可能會被破壞。

.example-img {
width: 600px;
height: 450px;
}

在上面的代碼中，我們將圖片的寬度和高度都放大了1.5倍，但是原有的高與寬比例被打破了，圖片顯得扁平而失真。

為了解決這個問題，我們可以使用CSS中的一個特殊單位：百分比。

.example-img {
width: 100%;
height: auto;
}

在上面的代碼中，我們將圖片的高度設(shè)置為自適應(yīng)，寬度設(shè)置為100%，這就能保證圖片的高與寬比例始終保持原有狀態(tài)。當我們更改圖片的大小時，寬度會隨之調(diào)整，高度也能夠自動適應(yīng)。

同時，百分比作為一個相對單位，能夠適應(yīng)不同屏幕尺寸，因此在響應(yīng)式網(wǎng)頁設(shè)計中也十分實用。

總之，在制作網(wǎng)頁時，保持高與寬比例相等可以讓頁面看起來更加美觀，通過使用百分比這個相對單位，我們能夠輕松地實現(xiàn)這個功能。