在網(wǎng)頁設(shè)計中，圖片的大小和比例一直是一個重要的問題。傳統(tǒng)的方式是通過設(shè)置圖片的寬高來保持圖片的比例，但這種方式只適用于固定大小的圖片。而在響應(yīng)式布局中，我們需要一種可以自適應(yīng)的圖片大小的解決方案。

CSS3中提供了一個非常方便的方法來實現(xiàn)等比例縮放的圖片，它就是標簽的object-fit屬性。通過設(shè)置object-fit為cover或contain，圖片可以根據(jù)容器大小自適應(yīng)縮放，同時保持圖片的比例不變。

img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain */
}

這樣設(shè)置之后，圖片會占據(jù)容器的整個空間，并且根據(jù)容器的大小自適應(yīng)縮放，同時保持圖片的比例不變。如果想要圖片鋪滿整個容器，可以將object-fit設(shè)為cover，如果想要圖片完全顯示并保持比例，可以將其設(shè)為contain。

除了object-fit，還有另外一種實現(xiàn)等比例縮放的方式，那就是使用padding。通過設(shè)置容器的padding-top或padding-bottom屬性為百分比來實現(xiàn)容器高度的自適應(yīng)和圖片等比例縮放。

.container {
position: relative;
width: 100%;
padding-top: 75%; /* 圖片的高寬比為4:3，所以padding-top的值為75% */
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

通過將容器的padding-top設(shè)為圖片高度與寬度的比例，可以實現(xiàn)容器高度的自適應(yīng)，而圖片則根據(jù)容器的大小等比例縮放。同時，因為圖片是絕對定位的，所以沒有影響到其它元素的布局。

總的來說，使用CSS3中的object-fit和padding可以實現(xiàn)圖片的自適應(yīng)縮放和保持比例，非常適合響應(yīng)式布局。通過合理地設(shè)置這些屬性，可以讓頁面的圖片在不同的設(shè)備上呈現(xiàn)最佳的效果。