要使用CSS媒体查询来实现模板的自适应图片显示。

首先，你需要在CSS中定义一个媒体查询，以配置在不同的屏幕大小下加载不同尺寸的图片。例如：

“`css

@media screen and (max-width: 480px) {
.template-image {
background-image: url(‘small-image.jpg’);
}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
.template-image {
background-image: url(‘medium-image.jpg’);
}
}

@media screen and (min-width: 769px) {
.template-image {
background-image: url(‘large-image.jpg’);
}
}
“`

然后，在HTML模板中，你需要为图片的容器元素添加一个类名，例如 `.template-image`：

“`html

“`

这样，当浏览器的宽度满足媒体查询条件时，对应尺寸的图片将会作为背景图片显示在容器元素中。

请注意，这种方法是通过将图片设置为背景图片并使用CSS的`background-image`属性来实现的。如果你想直接在HTML中插入图片，而不是作为背景图片显示，可以使用``标签，并根据媒体查询条件来切换不同的图片路径。

“`html

@media screen and (min-width: 481px) and (max-width: 768px) {
.template-image {
content: url(‘medium-image.jpg’);
}
}

@media screen and (min-width: 769px) {
.template-image {
content: url(‘large-image.jpg’);
}
}
“`

使用上述方法，你可以根据不同的屏幕大小来显示相应尺寸的图片，实现模板的自适应效果。