CSS中指定圖片大小的方法

在CSS中，我們可以使用width和height屬性來指定圖片的大小，這兩個(gè)屬性都接受像素、百分比、em等單位，下面是一些示例：

1、像素單位：

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

2、百分比單位：

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

3、em單位：

img {
  width: 2em;
  height: 1.5em;
}

需要注意的是，如果圖片本身的比例與指定的比例不符，那么圖片可能會(huì)被拉伸或壓縮，為了避免這種情況，我們可以使用object-fit屬性來指定圖片在容器中的填充方式。

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

上述代碼中，object-fit: cover;表示圖片將被縮放并填充到容器中，而不會(huì)改變其寬高比，其他可選的值包括contain（圖片將被縮放并填充到容器中，可能會(huì)留下空白區(qū)域）、scale-down（圖片將被縮放，如果容器足夠大，則使用原始尺寸）等。