CSS控制圖片大小的方法

在CSS中，我們可以使用多種方法來控制圖片的大小，以下是一些常見的方法：

1、使用width和height屬性

我們可以使用CSS的width和height屬性來直接設(shè)置圖片的寬度和高度，如果我們想要將一張圖片的寬度設(shè)置為200像素，高度設(shè)置為300像素，我們可以這樣寫：

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

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

與width和height屬性不同，max-width和max-height屬性允許圖片在不超過指定寬度或高度的情況下，保持其自然尺寸，這通常用于響應(yīng)式設(shè)計(jì)中，確保圖片在不同屏幕尺寸下都能正常顯示。

img {
  max-width: 100%;
  max-height: 100%;
}

3、使用scale()函數(shù)

CSS的transform屬性中的scale()函數(shù)可以用來縮放圖片，通過調(diào)整scale()函數(shù)中的參數(shù)，我們可以控制圖片的放大或縮小比例，將圖片縮小到原來的50%：

img {
  transform: scale(0.5);
}

4、使用object-fit屬性

object-fit屬性用于控制圖片在容器中的填充方式，通過調(diào)整object-fit屬性的值，我們可以改變圖片的填充方式，從而間接地控制圖片的大小，使圖片始終填充其容器：

img {
  object-fit: cover;
}