本文目錄導讀：

1. 使用CSS設置圖片大小
2. 使用object-fit屬性

CSS如何控制圖片大小

在網(wǎng)頁設計中，我們經(jīng)常需要調整圖片的大小以適應頁面的布局和設計，CSS（層疊樣式表）為我們提供了強大的工具來輕松地控制圖片的大小，本文將介紹如何使用CSS來截取和調整圖片大小。

使用CSS設置圖片大小

在CSS中，我們可以使用width和height屬性來設置圖片的大小。

img {
  width: 500px;  /* 設置圖片的寬度 */
  height: 300px; /* 設置圖片的高度 */
}

這將使所有的<img>標簽的圖片寬度變?yōu)?00像素，高度變?yōu)?00像素，需要注意的是，如果你只設置寬度或高度的一個值，另一個值將會自動調整以保持圖片的原始比例。

二、使用CSS的max-width和max-height屬性

如果你希望圖片在達到某個***大尺寸后停止縮放，可以使用max-width和max-height屬性。

img {
  max-width: 100%;  /* 圖片的***大寬度為父元素的100% */
  max-height: 500px; /* 圖片的***大高度為500像素 */
}

這將確保圖片不會超出其容器的寬度，并且其***大高度為500像素，這是一種響應式設計的常見做法，可以使圖片在各種設備上都能良好地顯示。

使用object-fit屬性

在某些情況下，你可能希望圖片在保持其原始比例的同時填充其容器，這時，你可以使用object-fit屬性。

img {
  width: 100%;  /* 設置圖片的寬度為容器的100% */
  height: 100%; /* 設置圖片的高度為容器的100% */
  object-fit: cover; /* 圖片將覆蓋整個容器，同時保持其原始比例 */
}

這將使圖片覆蓋整個容器，同時保持其原始比例，可能會出現(xiàn)裁剪效果。

使用CSS控制圖片大小是一種強大的網(wǎng)頁設計技巧，通過合理地使用width、height、max-width、max-height和object-fit等屬性，我們可以輕松地調整圖片的大小以適應頁面的布局和設計。