CSS圖片導(dǎo)入大小的方法

在CSS中，我們可以使用width和height屬性來(lái)設(shè)置圖片的大小，我們需要在HTML中導(dǎo)入圖片，然后使用CSS來(lái)設(shè)置圖片的大小。

如果我們有一張圖片路徑為"image.jpg"，我們可以這樣導(dǎo)入并設(shè)置大小：

<img id="myImage" src="image.jpg">

#myImage {
    width: 500px; /* 設(shè)置圖片寬度為500像素 */
    height: 300px; /* 設(shè)置圖片高度為300像素 */
}

在上面的代碼中，我們首先在HTML中導(dǎo)入圖片，并給圖片一個(gè)id，在CSS中，我們可以使用#myImage { }來(lái)設(shè)置圖片的大小。

需要注意的是，如果我們只設(shè)置寬度或高度其中一個(gè)屬性，那么另一個(gè)屬性將會(huì)自動(dòng)縮放以維持圖片的原始縱橫比，如果我們想要圖片完全不改變縱橫比，那么我們可以使用object-fit屬性來(lái)設(shè)置圖片在容器中的填充方式。

#myImage {
    width: 500px;
    height: 300px;
    object-fit: contain; /* 圖片將保持其原始縱橫比并填充到容器中 */
}

在上面的代碼中，圖片將保持其原始縱橫比并填充到容器中，不會(huì)變形。