I have set up a display of card decks to showcase a collection of articles pulled from a database. The code snippet I am currently using is fairly simple:
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;
}
As per the Bootstrap documentation, utilizing the card-deck class should result in all cards within the deck having equal width and height. However, I am not observing this behavior. You can view what I am experiencing in this image.
What would be the correct method to ensure consistency in both the size of the images within the cards and the dimensions of the cards themselves?