CSS中,我們可以使用width
和height
屬性來設(shè)置圖片的尺寸,如果想要讓圖片等比縮放,那么可以只設(shè)置width
或height
其中一個(gè)屬性,另一個(gè)屬性則設(shè)置為auto
,這樣CSS會(huì)自動(dòng)根據(jù)圖片原始比例進(jìn)行縮放。
假設(shè)我們有一張寬度為300像素的圖片,想要將其高度縮放為200像素,那么可以編寫如下CSS代碼:
img { width: 300px; height: 200px; }
這樣,圖片的高度會(huì)被縮放為200像素,而寬度保持不變?yōu)?00像素,實(shí)現(xiàn)了等比縮放的效果。
需要注意的是,如果圖片本身的高度和寬度比例與設(shè)置的尺寸比例不一致,那么圖片可能會(huì)出現(xiàn)拉伸或壓縮變形的情況,在設(shè)置圖片尺寸時(shí),需要確保設(shè)置的尺寸比例與圖片原始比例一致。
如果想要讓圖片在容器中居中顯示,可以使用display: block;
和margin: auto;
來實(shí)現(xiàn)。
img { width: 300px; height: 200px; display: block; margin: auto; }
這樣,圖片會(huì)在容器中水平居中顯示,并且保持等比縮放的效果。