CSS 如何控制寬高比率 在網頁設計中，控制元素的寬高比率是非常重要的。CSS 提供了各種方法來實現它。本文將介紹一些常用的方法。 1. 使用 padding-top 使用 padding-top 屬性是最常用的控制寬高比率的方法之一。這種方法使用一個 padding-top 值作為元素寬度的百分比來計算高度。例如，如果要設置一個 16:9 的視頻框，可以使用如下代碼：

.video {
position: relative;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. 使用偽元素 可以使用偽元素來設置源元素的寬度。例如，如果要設置一個 1:1 的正方形元素，可以使用如下代碼：

.square {
position: relative;
width: 50%;
}
.square::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.square img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

3. 使用固定寬度和高度 如果元素的寬度和高度都是固定值，那么可以使用具體的寬度和高度來控制寬高比率。例如，如果要設置一個 4:3 的圖像元素，可以使用如下代碼：

.image {
width: 400px;
height: 300px;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
}

總結 在網頁設計中，控制元素的寬高比率是非常重要的。CSS 提供了各種方法來實現它，如編寫基于padding-top的代碼去控制高度，偽元素控制寬度，或者是采用具有固定高度和寬度等等。我們可以根據元素所需的寬高比率選擇不同的方法。