Bootstrap 5响应式图片适配问题：小屏幕卡片图片高度异常

使用Bootstrap 5开发的卡片组件在大屏、中屏显示正常，但小屏幕下卡片内图片高度会异常增高。

代码片段 #

<div class="col-12 mb-4">
    <div class="card m-auto w-100 h-100 rounded">
        <div class="row g-0">
            <div class="col-4 h-100">
                <img src="{{ i.image.url }}" class="img-fluid rounded h-100" alt="...">
            </div>
            <div class="col-8">
                <div class="card-body">
                    <p class="weblog-post-title card-title" style="font-size: 1.25rem;">{{ i.title }}</p>
                    <p class="weblog-summery card-text text-muted">{{ post.summery|truncatechars:70 }}</p>
                    <div class="row mt-2">
                        <div class="col-6">
                            <p class="card-text"><small class="text-muted">{{ i.create|date:"SHORT_DATE_FORMAT" }}</small>
                            </p>
                        </div>
                        <div class="col-6 text-start">
                            <a href="{{ i.get_absolute_url }}"
                                class="btn btn-green btn-sm mt-2" style="border-radius: 10px;">see</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

显示情况 #

• 大屏正常显示：
• 小屏幕异常：

问题根源是给图片和父容器都添加了h-100类，小屏幕下左侧col-4宽度大幅收窄，h-100强制图片占满父容器高度，但右侧内容高度有限，导致图片被异常拉伸。

可以通过以下两种方式修复：

方式1：保留横向布局，修复图片比例 #

移除图片的h-100类，添加object-fit: cover保证图片比例，同时给图片设置最大高度约束：

<div class="col-4 h-100">
    <img src="{{ i.image.url }}" class="img-fluid rounded w-100" style="object-fit: cover; max-height: 220px;" alt="...">
</div>

方式2：小屏幕切换为垂直布局 #

给列添加Bootstrap响应式类，小屏幕下让图片和文字垂直堆叠，避免宽度过窄导致的拉伸：

<div class="col-md-4 col-12">
    <img src="{{ i.image.url }}" class="img-fluid rounded" alt="...">
</div>
<div class="col-md-8 col-12">
    <!-- 右侧卡片内容 -->
</div>

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