CSS圖片限制寬高詳解

在CSS中，我們可以使用多種方法來(lái)限制圖片的寬高，以下是一些常見(jiàn)的方法：

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

通過(guò)給圖片元素添加max-width和max-height屬性，我們可以限制圖片的寬度和高度，如果我們想要將圖片的寬度限制為300px，高度限制為200px，我們可以這樣寫(xiě)：

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

需要注意的是，這種方法只是限制了圖片的***大寬度和高度，如果圖片本身的大小超過(guò)這個(gè)限制，它會(huì)被縮放。

2、使用width和height屬性

另一種方法是直接使用width和height屬性來(lái)設(shè)置圖片的寬度和高度，這種方法會(huì)將圖片直接縮放或者擴(kuò)展，使其適應(yīng)給定的寬度和高度。

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

需要注意的是，如果圖片本身的大小小于這個(gè)限制，它可能會(huì)被擴(kuò)展，導(dǎo)致圖片失真，在使用這種方法時(shí)，我們需要確保圖片本身的大小與給定的寬度和高度相匹配。

3、使用object-fit屬性

在CSS中，我們還可以使用object-fit屬性來(lái)控制圖片的填充方式，如果我們想要讓圖片在保持縱橫比的同時(shí)填充整個(gè)容器，我們可以這樣寫(xiě)：

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

這種方法會(huì)在保持圖片縱橫比的同時(shí)，將圖片縮放或者擴(kuò)展以適應(yīng)給定的寬度和高度，它還會(huì)確保圖片始終填充整個(gè)容器，不會(huì)出現(xiàn)空白或者截?cái)嗟那闆r，在使用這種方法時(shí)，我們不需要擔(dān)心圖片失真或者顯示不全的問(wèn)題。