Css 引导卡组元素的比例不同

我显示卡片组是为了显示存储在数据库中的一组文章。这是我正在使用的一段非常简单的代码：

HTML

<div class="row">
    <div class="card-deck">
        <template is="dom-repeat" items="{{articles}}" as="article">
            <div class="col-12 col-md-4 mb-md-5">
                <div
                    class="card"
                    on-tap="showViewer"
                    data-id$="[[article.id]]"
                >
                    <img
                        class="card-img-top img-fluid vertical-image"
                        src$="{{getArticleImage(article)}}"
                        onerror$="this.src='{{defaultimage}}'"
                        alt="{{getArticleDescription(article)}}"
                    />
                    <div class="card-body d-flex flex-column justify-content-center py-2">
                        <div class="d-flex justify-content-start align-items-center mb-2">
                            <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article)}}>
                            <span class="medium-text">
                                {{getSources(article)}}
                            </span>
                        </div>
                        <p class="card-text primary-headline medium-text">
                            {{article.schema:headline}}
                        </p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

根据，使用

卡片组

类应使卡片组中的所有卡片具有相同的宽度和高度。然而，我并没有表现出那种行为。你是一张照片，你可以看到我得到了什么

---

要使卡片中的所有图像和所有卡片具有相同的高度和宽度，正确的方法是什么。希望能有帮助

卡片我只是一个简单的卡块。
危险
具有以下支持文本，作为附加内容的自然引入
卡片我只是一个简单的卡片块，但我有更多的文字！
主要的，重要的
具有以下支持文本，作为附加内容的自然引入
卡片我只是一个简单的卡块。
你好
具有以下支持文本，作为附加内容的自然引入

在每张卡上添加

h-100

，解决了它们尺寸不同的问题。但是，每张卡中的图像仍然有不同的大小。我怎样才能做到它们的尺寸都一样？我不知道他们会有什么变暗，因为我正在从互联网上删除这些文章。如果你用CSS调整原始图像的高度，他们会被压扁。要么你必须用photoshop制作相同的高度，要么保持原样。你的网格高度都相等。所以不用担心网格的高度，这没关系。我只需要所有的图像有相同的高度和宽度。我可以剪切图像的顶部或底部，这就是为什么我设置属性

object fit:cover

，但是我没有得到我期望的结果。你知道我怎样才能使所有的图像都具有相同的大小，根据需要切断图像的侧面或顶部/底部吗？你需要为图像的容器div添加一个高度，以便“对象适合：覆盖”工作。

.vertical-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.icon-sm {
    height: 20px;
    width: auto;
}

.medium-text {
    font-family: Raleway-Medium;
}

.primary-headline {
    font-size: 25px;
    line-height: 25px;
    text-align: justify;
}