本文目錄導(dǎo)讀：

1. HTML中的圖片標(biāo)簽
2. CSS中的圖片大小調(diào)整
3. 圖片保持比例
4. 響應(yīng)式圖片大小調(diào)整

如何用CSS調(diào)整圖片大小

CSS（級(jí)聯(lián)樣式表）是一種用于描述HTML文檔樣式的語言，其中也包括圖片大小的調(diào)整，下面將介紹如何用CSS來調(diào)整圖片大小。

HTML中的圖片標(biāo)簽

在HTML中，圖片通常使用<img>標(biāo)簽來定義，

<img src="example.jpg" alt="示例圖片">

src屬性指定了圖片的路徑，alt屬性則提供了圖片的描述，用于在圖片無法加載時(shí)顯示。

CSS中的圖片大小調(diào)整

在CSS中，可以通過width和height屬性來調(diào)整圖片的大小，如果想要將上述HTML中的圖片寬度調(diào)整為300像素，高度調(diào)整為200像素，可以添加以下CSS樣式：

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

這將使得所有<img>標(biāo)簽定義的圖片寬度變?yōu)?00像素，高度變?yōu)?00像素。

圖片保持比例

在調(diào)整圖片大小時(shí)，如果需要保持圖片的比例不變，可以通過設(shè)置object-fit屬性來實(shí)現(xiàn)。

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

這里的object-fit: contain;表示在保持圖片比例的同時(shí)，將圖片縮放***完全包含在指定的寬度和高度內(nèi)。

響應(yīng)式圖片大小調(diào)整

在響應(yīng)式設(shè)計(jì)中，圖片大小需要根據(jù)屏幕大小進(jìn)行調(diào)整，可以通過媒體查詢（Media Query）來實(shí)現(xiàn)。

img {
  width: 100%; /* 在小屏幕下，圖片寬度為100% */
}
@media screen and (min-width: 600px) {
  img {
    width: 300px; /* 在屏幕寬度大于600px時(shí)，圖片寬度為300px */
  }
}

這樣，在小屏幕下，圖片將充滿整個(gè)屏幕寬度；而在屏幕寬度大于600px時(shí)，圖片寬度將保持為300像素。