如何在 Bootstrap 中调整图像大小以使其显示为缩略图并降低卡片的高度？

Question

我正在开发一个 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>

目前：

图像以固定尺寸显示，但对于布局而言太大。 我希望图像看起来像缩略图（较小且与卡片成比例）。 卡的高度应相应缩小。 预期结果：

卡片的高度应降低。 图像应在其容器内按比例缩放，就像缩略图一样，而不会扭曲或剪切太多内容。 我尝试过的：

使用对象拟合：用比率类覆盖。 使用内联样式设置卡片的固定高度（例如 style="height: 250px;"）。 添加像 img-thumbnail 这样的类并调整边距/填充，但这会影响整体布局。 问题：如何正确调整图像大小以使其看起来像缩略图并降低卡片高度，同时保持响应能力？我应该采取特定于 Bootstrap 的方法或 CSS 调整吗？

Answer 1

创建卡片时，您设置其大小，在这种情况下，您可以使用类别

h-100

设置大小，以使卡片高度更小，将其类别从

h-100

更改为

h-75

，例如：

<div class=“card shadow d-flex flex-row h-75”>

或根据满足您的需求。

这是更正后的代码（我还添加了

.img-fluid{height: max-content;}

和

.card{overflow: auto;}

，这样内容就不会超出范围）：

.img-fluid{
  height: max-content;
}.card{
 overflow: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<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-75">
                <!-- Image container -->
                <div class="col-4 p-0">
                    <div class="ratio ratio-1x1">
                        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-JxYjZjRXIh4%2FVDWJoJPtYuI%2FAAAAAAACVDM%2FC9r2wraqtlQ%2Fs1600%2Fpaisajes%252Bnaturales%252Bfotos%252Bnuevas%252B(10).jpg&f=1&nofb=1&ipt=2a4c2e949bfec7539160797876d8f861cc9a4b282df2fdb934835419f6c1ef9e&ipo=images" 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>