Bootstrap элементы колоды карт не получают одинаковые пропорции

Question

Я показываю карточные колоды, чтобы показать набор статей, хранящихся в базе данных. Это довольно простой код, который я использую:

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>

CSS

.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;
}

Согласно Bootstrap документации , использование класса card-deck должно сделать все карты в колоде равными по ширине и высоте. Однако я не достигаю такого поведения. Здесь Вы - картинка, на которой вы видите, что я получаю.

Как правильно было бы добиться того, чтобы все изображения на карточках и на всех карточках имели одинаковую высоту и ширина

Answer 1

Проверьте это. Надеюсь, это поможет.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-4 py-2">
            <div class="card card-body h-100">
                Card. I'm just a simple card-block.
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 text-white bg-danger">
                <div class="card-body">
                    <h3 class="card-title">Danger</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-light">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 card-body">
                Card. I'm just a simple card-block, but I have a little more text!
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 border-primary">
                <div class="card-body">
                    <h3 class="card-title">Primary</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card h-100 card-body">
                Card. I'm just a simple card-block.
            </div>
        </div>
        <div class="col-sm-4 py-2">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h3 class="card-title">Hello</h3>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-light">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>