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

在CSS中，我們可以使用width和height屬性來設(shè)置圖片的大小，這兩個(gè)屬性分別表示圖片的寬度和高度，我們可以將具體的數(shù)值或百分比賦值給這兩個(gè)屬性，以改變圖片的大小。

如果我們想要將一張圖片的寬度設(shè)置為200像素，高度設(shè)置為300像素，我們可以這樣寫：

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

需要注意的是，如果圖片本身的比例與設(shè)置的寬度和高度不符，那么圖片可能會(huì)被拉伸或壓縮，為了避免這種情況，我們可以使用object-fit屬性來指定圖片在容器中的填充方式，我們可以設(shè)置object-fit: contain;來確保圖片始終在容器內(nèi)填充，且不會(huì)被拉伸或壓縮。

如果圖片需要響應(yīng)式設(shè)計(jì)，即在不同屏幕尺寸下能夠自適應(yīng)顯示，那么我們可以使用媒體查詢（Media Queries）來設(shè)置不同屏幕下的圖片大小，我們可以這樣寫：

img {
  width: 100%;
  height: auto;
}
@media (min-width: 600px) {
  img {
    width: 600px;
    height: 400px;
  }
}

在這個(gè)例子中，當(dāng)屏幕寬度大于600像素時(shí)，圖片的寬度將被設(shè)置為600像素，高度將被設(shè)置為400像素，而當(dāng)屏幕寬度小于600像素時(shí)，圖片的寬度將被設(shè)置為100%，高度將被設(shè)置為auto，即圖片將根據(jù)其原始大小進(jìn)行顯示。