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

1. 準(zhǔn)備工作
2. 設(shè)置圖片位置
3. 設(shè)置圖片大小
4. 響應(yīng)式設(shè)計(jì)

CSS百分比在網(wǎng)頁(yè)設(shè)計(jì)中有著廣泛的應(yīng)用，其中放置圖片也是其應(yīng)用場(chǎng)景之一，下面將介紹如何使用CSS百分比來放置圖片。

準(zhǔn)備工作

需要準(zhǔn)備一張需要放置的圖片，以及相應(yīng)的HTML和CSS代碼，在HTML中，可以使用img標(biāo)簽來插入圖片，而在CSS中，則可以使用百分比來設(shè)置圖片的位置和大小。

設(shè)置圖片位置

在CSS中，可以使用position屬性來設(shè)置圖片的位置，如果需要將圖片放置在頁(yè)面的中央，可以使用以下代碼：

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代碼中，img標(biāo)簽中的圖片會(huì)被放置在距離頁(yè)面頂部和左側(cè)都是50%的位置，然后通過transform屬性進(jìn)行微調(diào)，使其恰好位于中央。

設(shè)置圖片大小

在CSS中，可以使用width和height屬性來設(shè)置圖片的大小，如果需要將圖片設(shè)置為寬度為300px，高度為200px，可以使用以下代碼：

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

需要注意的是，如果圖片的原始比例與設(shè)置的比例不符，可能會(huì)出現(xiàn)圖片變形的情況，在設(shè)置圖片大小時(shí)，應(yīng)盡可能保持其原始比例。

響應(yīng)式設(shè)計(jì)

為了更好地適應(yīng)不同大小的屏幕，可以使用CSS中的媒體查詢（media query）來實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，當(dāng)屏幕寬度小于768px時(shí)，可以將圖片設(shè)置為寬度為100%，高度為auto，以適應(yīng)較小的屏幕：

@media (max-width: 768px) {
  img {
    width: 100%;
    height: auto;
  }
}

通過以上代碼，當(dāng)屏幕寬度小于768px時(shí)，圖片會(huì)自動(dòng)縮放并適應(yīng)屏幕大小。

使用CSS百分比來放置圖片可以實(shí)現(xiàn)靈活的位置和大小設(shè)置，同時(shí)結(jié)合媒體查詢可以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，使網(wǎng)頁(yè)更加適應(yīng)各種屏幕大小和設(shè)備類型。