Bootstrap 4.6+WordPress+ACF：图片撑大行高度适配问题求助

针对你遇到的图片撑高行导致底部空白的问题，核心是让图片列的高度完全跟随文本列的高度，同时让图片在容器内正确适配。可以通过以下调整解决：

关键修改点 #

• 给图片所在的列添加 d-flex 类，让容器变成弹性盒子，强制其高度继承自行的高度（由文本列决定）
• 保留图片的 w-100 h-100 object-cover，同时添加 flex-shrink-0 防止图片被压缩变形

修改后的完整代码 #

<section id="about">
    <div class="about-section position-relative overflow-hidden" style="background: linear-gradient(180deg, #00AEA0 0%, rgba(0, 131, 120, 0.5) 118.6%);">
        <img class="position-absolute bottom-0 right-0" src="<?php bloginfo('template_directory'); ?>/assets/img/about-us-background.png" style="max-width: 50%;">

        <div class="row">
            <!-- 给列添加d-flex，强制容器高度跟随行 -->
            <div class="col-12 col-lg-4 px-0 d-flex">
                <?php if (get_field('about_image')) : ?>
                    <!-- 图片保留适配类，添加flex-shrink-0防止压缩 -->
                    <img class="w-100 h-100 object-cover d-none d-lg-block flex-shrink-0" src="<?php the_field('about_image'); ?>">
                <?php endif; ?>
            </div>

            <div class="col-12 col-lg-6 offset-lg-1">
                <div class="px-4 px-lg-0 py-5 py-md-6">
                    <h1 class="title text-lg-left"><?php the_field('about_title'); ?></h1>

                    <div class="text-md-justify mt-4">
                        <?php the_field('about_text'); ?>
                    </div>

                    <a href="<?php the_field('about_button_link'); ?>" class="btn-custom btn-blue-1 mt-3 px-4 px-md-5"><?php the_field('about_button_text'); ?></a>

                    <div class="row gap-8 gap-lg-4 mt-5">

                        <?php if (have_rows('benefits')) : ?>
                            <?php while (have_rows('benefits')) : the_row(); ?>

                                <div class="col-12 col-sm">
                                    <div class="d-flex flex-column gap-4">
                                        <div class="hover-flip">
                                            <div class="benefit-icon">
                                                <?php if (get_sub_field('image')) : ?>
                                                    <img src="<?php the_sub_field('image'); ?>">
                                                <?php endif ?>
                                            </div>
                                        </div>
                                        <span class="font-weight-bold text-lg"><?php the_sub_field('name'); ?></span>
                                    </div>
                                </div>

                            <?php endwhile; ?>
                        <?php endif; ?>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

原理说明 #

原来的.col-lg-4是块级元素，没有强制高度约束，即使给图片加h-100，容器本身会被图片的原始高度撑开，导致行高度被拉高。添加d-flex后，列容器会变成弹性容器，其高度自动匹配行内最高的列（即文本列），此时图片的h-100才能真正填充容器高度，再配合object-fit: cover保证图片比例不变且填满容器，不会出现空白或拉伸变形。

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