CSS中設(shè)置圖片大小的方法

在CSS中，我們可以使用width和height屬性來設(shè)置圖片的大小，這兩個屬性分別表示圖片的寬度和高度，我們可以將這兩個屬性的值設(shè)置為固定的像素值，或者使用百分比來表示相對于父元素的大小。

下面是一個示例，展示如何在CSS中設(shè)置圖片的大?。?/p>

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

在上面的示例中，我們將圖片的寬度設(shè)置為300像素，高度設(shè)置為200像素，這樣，圖片的大小就被限制在了這個范圍內(nèi)。

我們也可以使用百分比來表示相對于父元素的大小，如果我們將圖片的寬度設(shè)置為100%，那么圖片的寬度就會等于其所在容器的寬度，下面是一個示例：

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

在上面的示例中，我們將圖片的寬度設(shè)置為100%，高度設(shè)置為200像素，這樣，圖片的水平尺寸就會等于其所在容器的水平尺寸，而垂直尺寸則被限制在了200像素內(nèi)。

需要注意的是，如果圖片本身的比例與設(shè)置的寬度和高度不一致，那么圖片可能會出現(xiàn)拉伸或壓縮的情況，為了避免這種情況，我們可以在CSS中使用object-fit屬性來控制圖片在容器中的填充方式，我們可以將object-fit屬性設(shè)置為cover，這樣圖片就會等比例縮放，并且完全覆蓋容器，下面是一個示例：

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

在上面的示例中，我們將圖片的寬度設(shè)置為300像素，高度設(shè)置為200像素，并且將object-fit屬性設(shè)置為cover，這樣，圖片就會等比例縮放，并且完全覆蓋容器，而不會發(fā)生拉伸或壓縮的情況。