式图片的关键是要在不同的设备上为图片提供适当的尺寸和分辨率。这通常可通过以下几种方法来实现：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 1000px) 100vw, 50vw">
<picture>
<source media="(min-width: 800px)" srcset="big-image.jpg">
<img src="small-image.jpg" alt="...">
</picture>.image {
background-image: url(small-image.jpg);
}
@media (min-width: 768px) {
.image {
background-image: url(medium-image.jpg);
}
}
@media (min-width: 1200px) {
.image {
background-image: url(large-image.jpg);
}
}以上是创建响应式图片的主要方法。关键字包括: srcset, sizes, picture, source, CSS, background-image, 媒体查询.