CSS圖片長寬怎么設(shè)置

在CSS中，我們可以使用width和height屬性來設(shè)置圖片的長和寬，這些屬性可以定義在樣式表中，或者通過內(nèi)聯(lián)樣式直接應(yīng)用在HTML元素上。

樣式表設(shè)置

在樣式表中，我們可以為特定的圖片元素定義width和height屬性，假設(shè)我們有一個名為my-image的圖片元素，我們可以這樣設(shè)置它的長和寬：

img.my-image {
  width: 300px;
  height: 200px;
}

內(nèi)聯(lián)樣式設(shè)置

我們也可以在HTML元素上直接應(yīng)用內(nèi)聯(lián)樣式來設(shè)置圖片的長和寬。

<img src="path/to/image.jpg" style="width: 300px; height: 200px;">

百分比寬度和高度

除了使用像素值，我們也可以使用百分比來設(shè)置圖片的寬度和高度，這樣，圖片的長和寬就會根據(jù)其父元素的寬度和高度來自動縮放。

img.my-image {
  width: 50%;
  height: 50%;
}

保持圖片比例

當(dāng)我們設(shè)置圖片的長和寬時，需要注意保持圖片的比例，以避免圖片變形，我們可以只設(shè)置寬度或高度其中一個屬性，另一個屬性則讓瀏覽器根據(jù)圖片原始比例自動計算。

img.my-image {
  width: 300px;
  height: auto;
}

或者：

img.my-image {
  width: 50%;
  height: auto;
}

通過CSS的width和height屬性，我們可以輕松地設(shè)置圖片的長和寬，需要注意的是，保持圖片的比例不變是很重要的，以避免圖片變形。