bootstrap 不同尺寸显示不同图片怎么实现

在Bootstrap中，可以通过图片的响应式特性来显示不同尺寸的图片，以适应不同屏幕尺寸。这通常是通过CSS中的媒体查询（Media Queries）来实现的。Bootstrap的栅格系统也支持响应式图片，可以确保图片在不同屏幕尺寸上自动缩放。

以下是一个简单的实现方法：

1. 使用Bootstrap的栅格系统，通过添加特定的类来控制不同屏幕尺寸下的图片显示。例如，你可以使用`img-responsive`类来使图片响应式。

<img src="small-image.jpg" class="img-responsive" alt="描述文字">

2. 对于不同尺寸的图片，可以在CSS中使用媒体查询来指定不同尺寸的图片文件。例如：

/* 默认情况下使用small-image.jpg */
img {
    width: 100%;
    height: auto;
}

/* 当屏幕宽度大于768px时，使用medium-image.jpg */
@media (min-width: 768px) {
    img {
        content: url(medium-image.jpg);
    }
}

/* 当屏幕宽度大于992px时，使用large-image.jpg */
@media (min-width: 992px) {
    img {
        content: url(large-image.jpg);
    }
}

/* 当屏幕宽度大于1200px时，使用extra-large-image.jpg */
@media (min-width: 1200px) {
    img {
        content: url(extra-large-image.jpg);
    }
}

这样，根据屏幕宽度的变化，图片会自动加载相应的尺寸版本。