CSS是一門用于網頁布局的語言，它可以控制網頁中各元素的位置、大小和樣式等。在網頁設計中，經常需要在網頁中插入圖片，而對于圖片的比例縮放也是網頁設計中很重要的一個環節。下面我們就來介紹如何使用CSS實現圖片按照比例縮放。

img{
max-width: 100%;
height: auto;
}

上述CSS代碼通過設置max-width屬性和height屬性，實現了圖片大小的自適應調整。其中max-width屬性設置圖片最大寬度為100%，也就是圖片最大可以撐滿整個容器的寬度。通過設置max-width屬性，可以保證當圖片比容器寬度小的時候，圖片能夠按照原比例進行顯示。

同時，為了保持圖片的縱橫比例，還需要設置height屬性為auto。這就意味著圖片的高度會根據寬度的調整自動計算，從而保證圖片比例不會改變。

<div class="image-container">
<img src="example.jpg" alt="示例圖片">
</div>

針對上面的CSS代碼，我們需要將圖片嵌套在一個容器中。如上述代碼所示，我們新建了一個class為image-container的div容器來承載圖片。這個容器的作用是為了設置圖片的父元素，以便于實現圖片的比例縮放。

總之，通過以上的CSS代碼和HTML代碼設置即可實現在網頁中插入圖片并按照比例縮放的效果。這樣既可以讓圖片在網頁中按照原比例顯示，又可以保證網頁的美觀度。