CSS圖片按比例布局在網頁設計中非常常見，它可以讓圖片自適應不同大小的屏幕。下面我們來討論如何使用CSS實現基于圖片比例的布局。

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

我們需要一個包含圖片的容器，這個容器采用固定寬度的方法讓圖片按照比例布滿整個容器。

.ratio-container{
position: relative;
width: 100%;
max-width: 600px;
}
.ratio-container img{
position: absolute;
width: 100%;
height: auto;
max-width: 600px;
}

首先我們需要讓容器具有相對定位，這樣就可以讓圖片根據容器進行絕對定位。接下來設置容器的寬度100%并且使用max-width限制寬度的最大值，這樣可以讓容器在不同的屏幕尺寸中自適應。最后是設置圖片的寬度為100%、高度為自適應，并且使用max-width限制最大寬度，確保圖片不會超過容器寬度。

這樣我們就可以得到一個比例布局的圖片，它會自適應屏幕大小，具有響應式設計的效果。