怎么用CSS控制圖片大小

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

1、使用width和height屬性

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

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

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

與width和height不同，max-width和max-height屬性允許圖片在達到***大寬度或高度之前進行縮放，這可以確保圖片始終適應其容器，而不會超出容器的大小。

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

3、使用object-fit屬性

object-fit屬性用于指定圖片在容器中的填充方式，我們可以使用object-fit屬性來使圖片在容器中保持其原始縱橫比，或者完全填充容器。

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

在這個例子中，圖片將被縮放并裁剪，以完全填充200像素寬和100像素高的容器，同時保持其原始縱橫比。

4、使用transform屬性進行縮放

我們還可以使用CSS的transform屬性來對圖片進行縮放，如果我們想要將圖片縮小到原來的50%，我們可以這樣寫：

img {
  transform: scale(0.5);
}

需要注意的是，使用transform屬性進行縮放可能會影響圖片的原始縱橫比，如果需要保持縱橫比不變，我們需要結(jié)合使用transform和object-fit屬性。