如何用Bootstrap实现图片水平对齐且上下边缘齐平？

要实现所有图片顶部和底部处于同一水平线，你可以通过调整Bootstrap的flex布局属性和图片的缩放规则来实现，修改后的代码如下：

<div class="container">
    <div class="row justify-content-center align-items-stretch">
        <!-- 左侧列 -->
        <div class="col-lg-8 col-md-8 col-10 d-flex flex-column">
            <div class="row justify-content-center g-4 flex-grow-1">
                <div class="col-lg-6 col-md-6 col-6 d-flex">
                    <img class="img-fluid h-100 object-fit-cover" src="/image-500x500.png" alt="">
                </div>
                <div class="col-lg-6 col-md-6 col-6 d-flex">
                    <img class="img-fluid h-100 object-fit-cover" src="/image-500x500.png" alt="">
                </div>
                <div class="col-lg-12 col-md-12 col-12 d-flex">
                    <img class="img-fluid h-100 object-fit-cover" src="/image-1000x500.png" alt="">
                </div>
            </div>
        </div>
        
        <!-- 右侧列 -->
        <div class="col-lg-4 col-md-4 col-10 d-flex">
            <img class="img-fluid h-100 object-fit-cover" src="/image-500x1000px.png" alt="">
        </div>
    </div>
</div>

关键修改说明： #

• align-items-stretch：给最外层的.row添加这个类，让左右两个大列的高度完全拉伸一致，确保它们的顶部和底部对齐
• d-flex + h-100：给每个包含图片的列（或容器）添加d-flex，同时给图片设置h-100，让图片填满所在容器的高度
• object-fit-cover：这个样式会让图片按比例缩放，填满容器的同时裁剪超出部分，保证图片不会变形；如果希望完整显示图片（可能留空白），可以换成object-fit-contain
• flex-grow-1：给左侧内部的.row添加这个类，让它填满左侧列的剩余空间，确保内部图片容器能撑满高度

如果需要自定义图片的显示效果，还可以额外添加CSS调整object-fit的属性，或者设置图片的最小高度。

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