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来确保图片被缩放并同时保持其宽高比例。

总之，自适应图片是一个非常重要的前端开发技术，可以帮助我们在不同的设备上实现高质量的网页布局和良好的用户体验。