CSS樣式如何改變圖片大小

在CSS中，我們可以使用width和height屬性來(lái)改變圖片的大小，這兩個(gè)屬性分別表示元素的寬度和高度，下面是一些示例代碼：

1、將圖片的寬度設(shè)置為500像素，高度自動(dòng)縮放：

img {
  width: 500px;
  height: auto;
}

2、將圖片的高度設(shè)置為300像素，寬度自動(dòng)縮放：

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

3、將圖片的寬度設(shè)置為100%，高度自動(dòng)縮放：

img {
  width: 100%;
  height: auto;
}

4、將圖片的高度設(shè)置為200%，寬度自動(dòng)縮放：

img {
  height: 200%;
  width: auto;
}

這些代碼可以將圖片的大小改變到指定的寬度和高度，如果原始圖片的長(zhǎng)寬比與指定的寬度和高度不匹配，則圖片可能會(huì)被拉伸或壓縮，為了避免這種情況，可以使用object-fit屬性來(lái)指定圖片在容器中的填充方式，

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

這將確保圖片始終保持在原始的長(zhǎng)寬比內(nèi)，并且填充容器的方式為覆蓋，希望這篇文章能幫助你輕松改變圖片的大小。