为什么响应式图像在弹性容器内缩小并且不占据响应式屏幕尺寸上的整个空间？

Question

我想防止图像在弹性盒内收缩，从而在弹性容器内留下太多空间。事实上，该图像是使用 Bootstrap 5 类中的 img-fluid 类进行响应的。在大屏幕上看起来不错，但是当屏幕尺寸缩小时，容器内的图像就会变小。

我尝试了很多方法来解决它。但我不知道这是因为没有使用正确的图像尺寸还是因为我需要使用媒体查询针对不同的屏幕进行纠正。

Answer 1

我不知道我理解是否正确，但是如果你想让你的图像在页面变小时不收缩，你可以删除图像上的img-fluid。 另外，如果您希望在页面较小时将图像保留在 Flexbox 容器中，您可以使用此类：

<div class="d-flex justify-content-evenly (use the image folder name here)">