CSS圖片的寬高設(shè)置方法

在CSS中，圖片的寬高設(shè)置是一個(gè)常見(jiàn)的需求，我們可以通過(guò)以下三種方式來(lái)實(shí)現(xiàn)：

1、使用width和height屬性

在CSS中，我們可以使用width和height屬性來(lái)直接設(shè)置圖片的寬度和高度。

img {
    width: 300px;
    height: 200px;
}

這段代碼會(huì)將所有<img>元素的寬度設(shè)置為300像素，高度設(shè)置為200像素。

2、使用max-width和max-height屬性

與width和height不同，max-width和max-height屬性允許圖片在不超過(guò)指定寬度和高度的情況下，保持其原始寬高比。

img {
    max-width: 300px;
    max-height: 200px;
}

這段代碼會(huì)將所有<img>元素的寬度限制在300像素以內(nèi)，高度限制在200像素以內(nèi)，同時(shí)保持圖片的寬高比不變。

3、使用object-fit屬性

object-fit屬性提供了一種更靈活的方式來(lái)控制圖片的填充方式。

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

這段代碼會(huì)將所有<img>元素的寬度設(shè)置為300像素，高度設(shè)置為200像素，并使用cover填充模式來(lái)保持圖片的寬高比不變。

是三種常見(jiàn)的CSS圖片寬高設(shè)置方法，你可以根據(jù)具體的需求選擇適合的方式。