在網頁設計中，我們經常需要控制頁面元素的寬度，但同時又希望元素高度可以自適應。這種情況下，我們可以使用 CSS 中的「限寬不限高」布局。

首先，我們需要給目標元素設置一個固定寬度。比如說，我們想要一個寬度為 500 像素的區塊：

.target {
width: 500px;
}

接著，我們需要讓元素的高度自適應。最簡單的方法就是使用 CSS 中的「padding-top」屬性來設置一個百分比值。具體來說，我們可以讓 padding-top 的值等于元素寬度的一定比例。

.target {
width: 500px;
padding-top: 100%; /* 高度為寬度的 100% */
}

在這段代碼中，我們將 padding-top 的值設置為 100%，這意味著元素的高度將會與寬度相同。如果我們將寬度改為 600 像素，高度也會自動變為 600 像素。

需要注意的是，在這種布局方式下，元素內部的內容會被壓縮在可視區域的上部分。如果我們想要讓內容居中，可以使用 CSS 的「絕對定位」和「transform」屬性來實現。下面是一個例子：

.target {
position: relative;
width: 500px;
padding-top: 100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在這段代碼中，我們將目標元素設置為「相對定位」，并讓 padding-top 的值等于寬度的 100%。接著，我們將元素內部的內容設置為「絕對定位」，并使用「top」和「left」屬性將內容居中。最后，使用「transform」屬性進行微調，使內容水平和垂直都居中。