在CSS中,等比縮放一個(gè)元素的高寬可以通過(guò)設(shè)置height
和width
屬性來(lái)實(shí)現(xiàn),這兩個(gè)屬性可以接收一個(gè)數(shù)值和一個(gè)單位,例如px
、em
、rem
等,如果你想讓一個(gè)元素的高寬等比縮放,你可以將height
和width
屬性設(shè)置為相同的數(shù)值和單位。
如果你想讓一個(gè)元素的高寬都等于200像素,你可以這樣寫(xiě):
element { height: 200px; width: 200px; }
如果你想讓一個(gè)元素的高寬都等于其容器的75%,你可以這樣寫(xiě):
element { height: 75%; width: 75%; }
如果元素的容器大小發(fā)生變化,元素的高寬也會(huì)相應(yīng)地變化,保持等比縮放的關(guān)系。
如果你想讓一個(gè)元素的高寬等比縮放,但只想改變其中一個(gè)屬性的值,你可以將另一個(gè)屬性的值設(shè)置為auto
,如果你想讓一個(gè)元素的高寬都等于200像素,但只想改變寬度為300像素,你可以這樣寫(xiě):
element { height: 200px; width: 300px; }
在這種情況下,高度將保持200像素不變,寬度將變?yōu)?00像素,實(shí)現(xiàn)等比縮放的效果。