CSS圖片自適應盒子是一種在網頁設計中非常常見的技術。它可以在頁面中按比例自適應地顯示圖片，讓網頁具有更好的兼容性和美觀度。

為了實現CSS圖片自適應盒子，我們需要使用img標簽、div容器和一些CSS樣式。

<div class="container">
<img src="image.jpg" class="image">
</div>
.container {
width: 100%;
padding-bottom: 60%; /*設置圖片高度自適應*/
position: relative;
}
.image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /*自適應填充*/
}

在上面的代碼中，我們首先創建了一個div容器，然后在容器中添加了一張img標簽的圖片。接著，我們在CSS樣式中設置了.container的寬度為100%，padding-bottom為60% 來使div容器根據圖片寬高比例作出自適應的調整。然后在.image的樣式中，我們使用position: absolute;來讓圖片位置為絕對定位，并設置width: 100%; height: 100%;讓圖片完整地填充整個div容器。最后，我們使用object-fit: cover;來讓圖片按比例自適應填充容器。

總的來說，CSS圖片自適應盒子是一種非常實用的技術，可以讓網頁具有更好的用戶體驗和兼容性。如果你想要學習更多關于網頁設計的技術，可以去嘗試使用這種方法來實現CSS圖片自適應盒子，希望對你有所幫助。