CSS正常比例放圖片是網絡開發中經常用到的一種技術。常見的情況是我們需要在網頁中插入一張圖片，但該圖片的大小尺寸與我們設計的網頁布局不符合。為了達到最好的視覺效果，我們必須讓圖片以正常比例縮放，適應我們的布局。下面介紹如何使用CSS實現正常比例放置圖片的方法。

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

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

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

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

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

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