本文目錄導(dǎo)讀：

1. 設(shè)置具體的像素值
2. 設(shè)置百分比
3. 使用auto關(guān)鍵字

CSS控制圖片大小的方法

在CSS中，我們可以使用width和height屬性來控制圖片的大小，這些屬性可以設(shè)置為具體的像素值，或者設(shè)置為百分比，甚***可以使用auto關(guān)鍵字來自動(dòng)調(diào)整圖片的大小。

設(shè)置具體的像素值

我們可以直接給width和height屬性設(shè)置具體的像素值，這樣圖片就會(huì)被縮放或者拉伸到指定的大小。

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

設(shè)置百分比

我們也可以設(shè)置width和height屬性為百分比，這樣圖片就會(huì)根據(jù)其父元素的大小自動(dòng)縮放。

img {
  width: 50%;
  height: 50%;
}

使用auto關(guān)鍵字

如果我們希望圖片能夠保持其原始大小，那么可以使用auto關(guān)鍵字來設(shè)置width和height屬性。

img {
  width: auto;
  height: auto;
}

需要注意的是，當(dāng)我們使用百分比或者auto關(guān)鍵字來設(shè)置圖片大小時(shí)，圖片可能會(huì)因?yàn)闉g覽器窗口的大小變化而變化，這時(shí)候我們可以使用CSS的object-fit屬性來控制圖片的填充方式，

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

這樣圖片就會(huì)始終填充整個(gè)容器，而不會(huì)變形。