CSS高度隨寬度變化的方法 在Web開發中，經常需要使元素寬度和高度自適應，以適應不同屏幕大小的設備。但是，僅靠設置寬度是不夠的，還需要設置元素的高度。 在CSS中，可以使用下面的方法來使元素的高度隨寬度變化： 1.使用padding-top或padding-bottom屬性 可以使用padding-top或padding-bottom屬性來設置元素的高度。這個屬性用來給一個元素增加內邊距。當我們設置了一個元素的padding-top或padding-bottom為一個百分比值時，它將根據其包含塊的寬度來計算。 例如，我們可以使用下面的CSS代碼來使一個div元素的高度和寬度自適應：

div {
width: 50%;
padding-top: 50%;
background-color: red;
}

當這個div元素的寬度變化時，它的高度也會相應地跟著變化。這是因為padding-top屬性值是相對于包含塊的寬度計算的，所以即使寬度變化了，高度也會隨之改變。 2.使用vw和vh單位 CSS也提供了vw和vh單位，它們可以幫助我們將元素的高度和寬度與視口的大小保持一定的比例關系。 vw和vh是相對于視口寬度和視口高度的單位。1vw表示視口寬度的1%，1vh表示視口高度的1%。 如果我們想將一個元素的寬高比例設置為16:9，我們可以使用下面的CSS代碼：

div {
width: 50vw;
height: 28.125vw;
/* 16:9 = 9 / 16 * 50 */
background-color: red;
}

當視口的寬度改變時，這個div元素的高度也會相應地跟著變化。這是因為我們使用了相對于視口寬度的vw單位來計算元素的高度。所以無論視口的大小如何，元素的高度和寬度總是保持16:9的比例關系。 總結 這些方法可以幫助我們使元素的高度隨著寬度的變化而自適應。在實際開發中，我們可以根據具體的需求選擇相應的方法來實現布局效果。