尝试将以下内容添加到样式表中：

img {
    width: 100%;
}

**更新：**作为一种替代方案（正如@JasonAller在回答中的评论所指出的），你可以将class="img-responsive"添加到每个img元素中。这会将max-width: 100%;和height: auto;应用到图像中，这样它就可以很好地缩放到父元素中。更多信息请参见Bootstrap文档。

bootstrap v4更新

Bootstrap v4的类名为img-fluid
Bootstrap v4 docs

对于Bootstrap 4，您必须使用use class=“img-fluid”，class=“img-responsive”将在3.x中工作。

有时，在动态内容上，当您无法控制用户输入的内容时，class=“img-responsive”将无法工作。100%'对每个图像也是棘手的。所以我使用：

img {max-width: 100%;}

请注意，引导数据行也会有填补;这可能是意料之外的。
以下内容：

div class="col-sm-6" style="padding:0"

对我有用。

如果需要，可以在html元素中使用width标记，例如：

<img width="60%" src="...">

我发现它更有用，因为你可以玩百分比，直到你有想要的大小。

解决这个问题的方法是使用<picture>和<source>标记。只要确保为不同的屏幕准备了不同大小的图像。
https://www.w3schools.com/tags/att_source_media.asp

Bootstrap 5的一般解。我在答案的最后添加了OP问题的一个特殊解。
在某些情况下，调整大小似乎不是一件容易的事情。我还没有在BS 5中找到任何使用Bootstrap类来调整特定图像大小的内置实现。
我发现的最佳解决方案是像处理其他HTML元素（span或div元素）一样处理图像。

一般解决方案

使用此代码段

<img
    src="~/Content/images/YourImage.jpg"
    class="img-fluid mx-auto mx-lg-0 h-100 col-8 col-sm-6 col-md-4 col-lg-1 my-auto"
>

注意：这只是一个一般性的例子，根据你的需要进行调整。

解释（或多或少会发生这种情况）

• 基本设置（用于引导响应映像）：
• img-fluid：映像已响应。这将应用max-width：100%;以及高度：auto;添加到图像，使其与父宽度一起缩放。
• mx-auto：在手机视图中，将图像在水平轴上居中。左右边距设置为自动
• mx-lg-0：当达到lg断点时，两边的边距设置为0。
• 使用列（根据需要调整大小）：
• h-100：图像高度设置为相对于父级的100%。这应保持正确的纵横比。
• col-8：在最小屏幕尺寸下，图像将占用8列。
• col-sm-6：在小屏幕断点之后（参见以下部分的链接），图像将占据6列。
• col-md-4：在中等尺寸屏幕上，4列。
• col-lg-1：在大尺寸屏幕上，1列。
• my-auto：用于垂直居中（可选）。

记住，你要根据自己的意愿和喜好来设置纵队。
结果

此问题的解决方案

代码的主要问题是缺少类。请记住：Bootstrap主要是关于正确使用类。如果你在放入你自己的CSS代码之前正确使用了内置类，你应该三思而后行。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>

对于不同屏幕尺寸下的响应，请参阅上面的通用解决方案。

链接

• https://getbootstrap.com/docs/5.1/content/images/#responsive-images
• https://getbootstrap.com/docs/5.1/layout/columns/
• https://getbootstrap.com/docs/5.1/layout/breakpoints/
• https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-parent