CSS圖片按比例放大是一個常見的需求，如果你的網站中有許多圖片需要顯示，那么就需要讓這些圖片按比例放大，以適應不同尺寸的設備屏幕，從而使用戶可以更好地交互體驗。下面我們就來學習一下如何用CSS來實現圖片按比例放大。

/*先讓圖片保持原本的寬高比，類名為"img-responsive"*/
.img-responsive{
max-width: 100%;
height: auto;
width: auto\9; /* IE8及以下兼容 */
}
/*然后將img父元素定義為響應式容器*/
.responsive-container{
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; /*這是16:9寬高比（即視頻默認比例，可以換成其他比例）*/
position: relative;
}
/*最后調整img的樣式，使其能夠填充響應式容器*/
.responsive-container img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}

如上代碼所示，我們首先使用一個類名為“img-responsive”的CSS類來將圖片保持原本的寬高比。通過將最大寬度設置為100%，并將高度設置為auto，圖片就可以按比例進行拉伸或縮短，而沒有失真或變形。此外，我們也使用了一個IE8及更低版本的CSS hack，使得該類名在舊版本的IE中也能正常執行。

然后，我們將img父元素定義為一個響應式容器，使得其具有固定的寬高比，即16:9寬高比。我們使用padding-top來確保其與寬度的比例始終為16：9，這是因為padding的值是相對于元素寬度的百分比，而height則被設為零。此外，為了確保其他內容不會影響該容器，我們將overflow設為“hidden”。

最后，我們調整img的樣式，使其能夠填充整個響應式容器，從而使其能夠按比例放大。通過將max-width和max-height均設為100%，我們可以保證圖片不會超出容器的范圍，并使其在最大限度內填充整個屏幕。此外，我們還使用了一個絕對定位，使得其能夠居中在容器中。

當我們將這些代碼添加到我們的網站中時，我們就可以輕松地實現圖片按比例放大的效果，使我們的用戶感受到更加良好的交互體驗。