如何在Bootstrap中将图片设为缩略图并缩减卡片高度？

我正在开发一个Bootstrap项目，其中展示的卡片左侧为图片、右侧为文本。我希望将图片缩小为缩略图样式，同时缩减卡片整体高度以让布局更紧凑，且图片需在容器内适配良好无变形。

当前代码 #

<div class="container my-4">
    <div class="row">
        <!-- Card 1 -->
        <div class="col-12 mb-4">
            <div class="card shadow d-flex flex-row h-100">
                <!-- Image container -->
                <div class="col-4 p-0">
                    <div class="ratio ratio-1x1">
                        <img src="path-to-image.jpg" class="img-fluid rounded-start" alt="Property 1"
                             style="object-fit: cover;">
                    </div>
                </div>
                <div class="card-body d-flex flex-column col-8">
                    <h5 class="card-title">Beautiful Duplex for Sale</h5>
                    <p class="card-text text-success fw-bold">USD 800,000.00</p>
                    <p class="card-text"><i class="fa-solid fa-location-dot"></i> Lima, Peru</p>
                    <p class="card-text">This furnished duplex with 3 bedrooms in San Isidro offers a great view of the golf course. Perfect for you!</p>
                    <div class="hstack gap-3 card-data d-flex justify-content-around mb-3">
                        <p class="m-0"><i class="fa-solid fa-bed"></i> 3</p>
                        <p class="m-0"><i class="fa-solid fa-bath"></i> 3</p>
                        <p class="m-0"><i class="fa-solid fa-chart-area"></i> 500.00 m2</p>
                        <p class="m-0"><i class="fa-solid fa-house"></i> 350.00 m2</p>
                    </div>
                    <div class="d-grid mt-auto">
                        <button class="btn btn-outline-success" type="button">More Info</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当前情况 #

• 图片以固定尺寸显示，对于布局来说过大
• 希望图片呈现缩略图效果（更小且与卡片比例适配）
• 卡片高度需相应缩减

预期效果 #

• 卡片高度降低
• 图片在容器内按比例缩放，呈现缩略图样式，无变形或过度裁切

已尝试的方法 #

• 结合ratio类使用object-fit: cover
• 通过内联样式为卡片设置固定高度（如style="height: 250px;"）
• 添加img-thumbnail类并调整边距/内边距，但影响了整体布局

请问：如何在保持响应式的前提下，正确将图片调整为缩略图并缩减卡片高度？是否有Bootstrap专属方案或CSS调整方法？

可以通过Bootstrap内置类结合少量自定义调整实现需求，核心是控制图片容器尺寸、优化卡片内间距，同时保持响应式：

1. 缩小图片容器占比与固定高度 #

• 将图片容器的col-4改为更小的网格类（比如col-3），减少图片在卡片中的宽度占比
• 替换ratio-1x1为固定高度的容器，避免正方形比例导致图片过高，搭配object-fit: cover保证图片不变形

2. 压缩卡片与文本区域的内边距 #

• 给卡片添加p-2类减少整体内边距，替代默认的宽松间距
• 调整文本区域的内边距为px-3，缩减左右留白

3. 减少文本元素的上下间距 #

• 给标题、价格、描述等文本添加mb-1、mb-2类，压缩段落之间的margin，让内容更紧凑

修改后的完整代码 #

<div class="container my-4">
    <div class="row">
        <!-- Card 1 -->
        <div class="col-12 mb-4">
            <div class="card shadow d-flex flex-row h-100 p-2">
                <!-- Image container -->
                <div class="col-3 p-0">
                    <!-- 自定义高度的缩略图容器 -->
                    <div style="height: 180px; overflow: hidden;">
                        <img src="path-to-image.jpg" class="img-fluid rounded-start w-100 h-100" alt="Property 1"
                             style="object-fit: cover;">
                    </div>
                </div>
                <div class="d-flex flex-column col-9 px-3">
                    <h5 class="card-title mb-1">Beautiful Duplex for Sale</h5>
                    <p class="card-text text-success fw-bold mb-1">USD 800,000.00</p>
                    <p class="card-text mb-1"><i class="fa-solid fa-location-dot"></i> Lima, Peru</p>
                    <p class="card-text mb-2 small">This furnished duplex with 3 bedrooms in San Isidro offers a great view of the golf course. Perfect for you!</p>
                    <div class="hstack gap-3 card-data d-flex justify-content-around mb-2">
                        <p class="m-0"><i class="fa-solid fa-bed"></i> 3</p>
                        <p class="m-0"><i class="fa-solid fa-bath"></i> 3</p>
                        <p class="m-0"><i class="fa-solid fa-chart-area"></i> 500.00 m2</p>
                        <p class="m-0"><i class="fa-solid fa-house"></i> 350.00 m2</p>
                    </div>
                    <div class="d-grid mt-auto">
                        <button class="btn btn-outline-success btn-sm" type="button">More Info</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

额外优化建议 #

• 用响应式网格类（如col-md-3 col-sm-4），保证小屏设备上图片不会过小
• 若需批量调整，可自定义CSS类统一维护：

.thumbnail-container {
    height: 180px;
    overflow: hidden;
}
.compact-card .card-text {
    margin-bottom: 0.5rem;
}

直接在HTML中引用这些类即可统一修改样式

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