在前端開發(fā)中，我們經(jīng)常需要為某些元素設(shè)置固定的寬高比。例如，我們可能需要為圖片、視頻或者某些特殊的容器設(shè)置一個特定的寬高比。在這種情況下，CSS提供了幾種簡單的方法用于鎖定元素的寬高比。

/* 方法一：通過 padding-top 實現(xiàn)鎖定寬高比 */
.locked-ratio {
position: relative;
width: 100%;
/* 假如我們需要鎖定元素的寬高比為 16：9 */
padding-top: 56.25%;
/* 其中 9/16 = 0.5625 */
}
.locked-ratio >* {
position: absolute;
width: 100%;
height: 100%;
}
/* 方法二：通過設(shè)置固定的高并使用 margin 負值進行偏移 */
.locked-ratio {
position: relative;
width: 100%;
/* 假如我們需要鎖定元素的寬高比為 4：3 */
height: 0;
padding-bottom: 75%;
/* 其中 3/4 = 0.75 */
}
.locked-ratio >* {
position: absolute;
width: 100%;
height: 100%;
margin-top: -25%;
}
/* 方法三：通過使用偽元素計算寬高比并使用 overflow: hidden 隱藏多余部分 */
.locked-ratio {
position: relative;
width: 100%;
/* 假如我們需要鎖定元素的寬高比為 3：2 */
}
.locked-ratio::before {
content: "";
display: block;
padding-top: 66.7%;
/* 其中 2/3 = 0.667 */
}
.locked-ratio >* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

以上是三種常見的鎖定寬高比的方法，我們可以根據(jù)實際需要選擇其中一種進行使用。注意，這些方法只適用于具有明確寬度的元素，對于響應(yīng)式布局的情況需要使用更為復雜的解決方案。