在開發網頁時,經常需要向網頁中插入圖片。然而,插入的圖片可能并不是符合網頁排版的尺寸大小,需要對圖片進行縮放以適應網頁。而在CSS中,給圖片設置尺寸大小的最常用方法是使用"max-width"屬性和"max-height"屬性。
img { max-width: 100%; max-height: 100%; }
上述CSS代碼表示將圖片的最大寬度和最大高度都設置為100%。這樣,無論圖片的原始尺寸是多少,都會按照網頁的寬度和高度自動進行縮放,以適應網頁排版。而如果只想對圖片縮放其中一個尺寸,可以只設置相應的屬性,如下:
img { max-width: 100%; height: auto; }
上述CSS代碼只對圖片的最大寬度進行了限制,圖片的高度將自動按比例縮放。同理,如果只想對圖片縮放最大高度,可以設置max-height屬性和width屬性:
img { max-height: 100%; width: auto; }
在實際開發中,為了確保圖片的顯示效果,還應該對圖片進行裁剪、壓縮等處理,以減小圖片的尺寸、提高網頁的加載速度。