CSS控制圖片寬度和高度的方法

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

1、使用width和height屬性

CSS中的width和height屬性可以分別設(shè)置圖片的寬度和高度，要將圖片的寬度設(shè)置為200像素，高度設(shè)置為100像素，可以使用以下代碼：

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

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

與width和height屬性不同，max-width和max-height屬性?xún)H當(dāng)圖片的實(shí)際尺寸超過(guò)指定的***大值時(shí)才會(huì)生效，這可以用于確保圖片在容器中不會(huì)超出其容器的大小。

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

3、使用object-fit屬性

object-fit屬性用于改變圖片在容器中的填充方式，要將圖片等比縮放以適應(yīng)其容器，可以使用以下代碼：

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

4、使用圖片的尺寸屬性

在HTML中，圖片元素具有width和height屬性，這些屬性可以直接設(shè)置圖片的尺寸。

<img src="image.jpg" width="200" height="100">

需要注意的是，當(dāng)使用HTML中的尺寸屬性時(shí)，應(yīng)確保提供的尺寸與圖片的實(shí)際尺寸相匹配，以避免圖片變形或裁剪。

CSS提供了多種方法來(lái)控制圖片的寬度和高度，可以根據(jù)具體的需求選擇適合的方法。