在当前的多终端环境下，网站和应用程序需要适配各种设备，包括手机、平板电脑和桌面电脑。其中，图片的显示是一个重要的考虑因素。CSS3提供了许多响应式图片的技巧，可以帮助我们轻松实现多终端适配。本文将详细介绍这些技巧，并提供具体的示例。
1. 响应式图片的基础概念
响应式图片指的是能够根据不同的设备屏幕尺寸和分辨率自动调整尺寸和分辨率的图片。在HTML和CSS中，我们通常使用以下两种方法来实现响应式图片：
使用不同尺寸的图片文件
使用CSS的
background-size
属性
1.1 使用不同尺寸的图片文件
这是最简单的方法，只需要为不同的设备准备不同尺寸的图片文件。当设备尺寸发生变化时，通过修改HTML中的
标签的
src
属性，就可以加载相应的图片。
在这个例子中，根据屏幕尺寸的不同，
标签会加载不同的图片。
srcset
属性指定了不同分辨率的图片文件，
sizes
属性定义了在不同屏幕尺寸下应该加载哪个图片。
1.2 使用CSS的
background-size
属性
使用
background-size
属性，可以设置图片的背景尺寸以适应容器。这个方法通常用于背景图片或者图片容器布局。
.background-image {
background-image: url(‘image-1280×960.jpg’);
background-size: cover;
}
在这个例子中，
background-size: cover;
会将图片覆盖到容器大小，保持图片的宽高比不变。
2. CSS3响应式图片的技巧
2.1 使用
object-fit
属性
object-fit
属性用于控制替换元素（如
和