Bootstrap 5设置max-height后图片溢出容器问题咨询

问题出在哪？ #

img-fluid 类仅负责让图片宽度自适应父容器（核心样式是 max-width: 100%; height: auto;），但它不会限制图片的高度。当你的 col-2 列宽度足够时，图片会按照自身宽高比（示例中是600:400=3:2）计算高度，这个高度很容易超过你给 banner 设置的 max-height: 50px，自然就溢出容器了。

另外，banner 的 max-height 只是限制了容器本身的最大高度，不会强制子元素（包括图片和列）自动适配这个高度，所以子元素高度超过容器时就会露出来。

解决办法 #

方法1：直接限制图片的最大高度

给图片加上 max-height，让它不超过 banner 的高度，同时保留比例缩放：

.banner {
    background: red;
    max-height: 50px;
}
.banner img {
    max-height: 50px;
}

这样图片的高度最多为50px，宽度会自动按比例缩小，完美适配容器。

方法2：让容器裁剪溢出内容并垂直居中

如果希望图片保持比例，超出部分隐藏，同时让内容垂直居中，调整 banner 的样式：

.banner {
    background: red;
    max-height: 50px;
    overflow: hidden; /* 裁剪超出部分 */
    align-items: center; /* 垂直居中内容 */
}

这个方案适合图片尺寸较大，不想让它缩得太小的场景，溢出的部分会被容器隐藏掉。

方法3：让列容器继承高度约束

给 col-2 设置高度为100%，再让图片的最大高度匹配列的高度：

.banner {
    background: red;
    max-height: 50px;
}
.banner .col-2 {
    height: 100%;
}
.banner img {
    max-height: 100%;
}

这种方式更灵活，即使后续修改 banner 的高度，图片也会自动适配。

内容的提问来源于stack exchange，提问作者user779681