CSS正常比例放圖片是網(wǎng)絡(luò)開發(fā)中經(jīng)常用到的一種技術(shù)。常見的情況是我們需要在網(wǎng)頁中插入一張圖片，但該圖片的大小尺寸與我們設(shè)計的網(wǎng)頁布局不符合。為了達(dá)到最好的視覺效果，我們必須讓圖片以正常比例縮放，適應(yīng)我們的布局。下面介紹如何使用CSS實現(xiàn)正常比例放置圖片的方法。

/*先設(shè)置一個容器，用來盛放圖片*/
.container {
width: 600px; /*設(shè)置容器寬度*/
height: 400px; /*設(shè)置容器高度*/
}
/*設(shè)置圖片的樣式*/
.img {
display: block; /*將圖片變成塊級元素*/
width: 100%; /*設(shè)置圖片寬度為100%*/
height: auto; /*設(shè)置圖片高度自適應(yīng)，以保持正常比例*/
}

在上面的代碼中，我們首先定義一個容器，容器的寬度和高度將會決定圖片所占據(jù)的空間。接著，我們將圖片變成塊級元素（display: block），這樣可以讓圖片在容器中自適應(yīng)寬度，并且與其他元素垂直排列。最后，我們將圖片的高度設(shè)置為自適應(yīng)（height: auto），這樣可以保持原始圖片的比例。

下面是一個示例代碼，展示了如何在HTML中使用上述CSS樣式：

<div class="container">
<img class="img" src="avatar.jpg" alt="my avatar">
</div>

在這個示例中，我們使用了div容器來包裹圖片，并且定義了一個class名叫“container”。圖片的類名也為“img”，并且我們必須在img標(biāo)簽中指定圖片的路徑（src屬性），以及圖片的描述（alt屬性）。

使用CSS正常比例放置圖片可以有效提高網(wǎng)頁的可讀性和美觀度，特別是對于那些需要大量展示圖片的網(wǎng)頁設(shè)計來說，更是至關(guān)重要。