在網頁設計中，我們經常需要將圖片與框進行縮小以適應不同的屏幕尺寸。今天我們來探討一下如何使用CSS實現框與圖片等比例縮小。

.box {
width: 50%;
height: auto; 
padding-bottom: 50%; /* 比例為1:1 */
position: relative; 
}
.box img {
position: absolute; 
height: 100%; 
width: 100%; 
object-fit: cover; /* 圖片填充整個框 */
}

以上是一個實現框與圖片等比例縮小的例子。我們先設置一個框的寬度為50%，然后通過padding-bottom屬性將高度設為寬度的50%。這樣就實現了比例為1:1的效果。接著設置position為relative，為圖片設置position為absolute，并將圖片的寬度和高度都設置為100%。最后使用object-fit:cover屬性，使圖片填充整個框。

這種實現方式還有一個好處，就是可以避免圖片拉伸變形。因為我們設置的是padding-bottom屬性，所以即使在縮小屏幕的時候，框的高度也會和寬度等比例縮小，圖片也會隨之進行縮放。這樣就避免了圖片變形的問題。

總而言之，使用CSS實現框與圖片的等比例縮小，不僅可以保持布局的整潔，還可以避免圖片變形的問題。這是我們在網頁設計中常用的一種技巧，相信大家在實際應用中會得心應手。