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

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

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

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

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

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

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

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

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

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