CSS3中可以使用“height: 0; padding-bottom: XX%;”的方法實現等比例縮放。其中,XX%是根據寬度和高度比例計算得出的值。
.box { width: 100%; height: 0; padding-bottom: 56.25%; /*16:9的寬高比例*/ background-color: #ccc; }
在上面的代碼中,設置了寬度為100%、高度為0,并且通過padding-bottom屬性設置了padding占據元素高度的比例,以實現等比例縮放。其中,56.25%是16:9的寬高比例所對應的值,可以根據自己需求的寬高比進行計算。
使用等比例縮放能夠避免因為圖片或者內容寬高比不一致而導致的元素變形的問題。同時,也能夠使響應式布局更加流暢。通過對元素高度的比例設置,也能夠適應不同寬度下的顯示效果。