如何限制圖片的尺寸CSS

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

1、使用width和height屬性

我們可以使用CSS的width和height屬性來(lái)限制圖片的尺寸，如果我們想要將圖片的寬度限制為200像素，高度限制為300像素，我們可以這樣寫(xiě)：

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

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

與width和height屬性不同，max-width和max-height屬性允許圖片在達(dá)到***大尺寸后繼續(xù)按比例縮放，如果我們想要將圖片的***大寬度限制為200像素，***大高度限制為300像素，我們可以這樣寫(xiě)：

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

3、使用object-fit屬性

CSS的object-fit屬性可以用來(lái)控制圖片在容器中的填充方式，我們可以使用object-fit屬性來(lái)確保圖片始終保持在一定的尺寸范圍內(nèi)，如果我們想要讓圖片始終填充其容器，但不超過(guò)容器的尺寸，我們可以這樣寫(xiě)：

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

在上面的代碼中，圖片將始終填充其容器，但寬度和高度都不會(huì)超過(guò)容器的尺寸。