CSS是前端開發中非常重要的一個組成部分，它可以讓我們的網站變得更加美觀和易于管理。其中一個非常有用的特性是自適應圖片(Size and Background-Size)，我們可以使用它來讓圖片自動適應其容器大小，使我們的網站看起來更加專業和美觀。

下面是一些CSS代碼來完成這項任務：

img {
max-width: 100%;
height: auto;
}
.container {
background-image: url('picture.jpg');
background-repeat: no-repeat;
background-size: cover;
}

以上代碼的作用是將圖片的最大寬度設置為100%并且自動調整高度，這意味著當用戶調整瀏覽器窗口大小時，圖片將自動縮放以適應其容器的大小。另外，我們將容器的背景圖片設置為picture.jpg，并使用background-size設置為cover，這將使圖片完全填充容器。

最好的方式是在編寫代碼時使用Responsive Web Design來確保網站在任何設備上都有良好的表現。下面的代碼演示了如何使用媒體查詢來改變圖片的大小：

@media only screen and (max-width: 600px) {
.container {
background-size: contain;
}
}

在這個示例中，我們使用@media查詢來針對小于或等于600px的屏幕寬度進行設置。如果屏幕大小小于或等于600px，我們將使用background-size: contain來確保圖片被縮放并同時保持其寬高比例。

總之，自適應圖片是一個非常重要的前端開發技術，可以幫助我們在不同的設備上實現高質量的網頁布局和良好的用戶體驗。