在網(wǎng)站設(shè)計中，圖片是一個非常重要的元素，占據(jù)了很大一部分的頁面空間。而圖片大小的填充也是一個需要注意的問題。

CSS中有幾種方式可以控制圖片的大?。?/p>

img {
width: 100%; /* 將圖片寬度設(shè)置為父元素的寬度 */
height: auto; /* 讓高度自適應(yīng)比例縮放 */
}

這種方式會將圖片寬度填充父元素的寬度，比較常見的應(yīng)用場景是響應(yīng)式設(shè)計，當(dāng)頁面尺寸發(fā)生變化時也能保持圖片的比例。

img {
width: 200px; /* 設(shè)置圖片寬度為200像素 */
height: 200px; /* 設(shè)置圖片高度為200像素 */
object-fit: cover; /* 裁剪圖片，保持比例填充元素 */
}

這種方式會將圖片填充到指定的寬高比例，多余部分會被裁剪掉，適合用于卡片式的布局。

img {
width: 200px; /* 設(shè)置圖片寬度為200像素 */
height: auto; /* 讓高度自適應(yīng)比例縮放 */
max-height: 200px; /* 設(shè)置最大高度為200像素 */
}

這種方式可以限制圖片的最大高度，防止圖片在縮小時變形，同時也保證了圖片不會占用過多頁面空間。