<div class="card">
<div class="card-img-scalable">
<img data-lazyimage="../../img/unsplash/natalya-letunova-AQ5JHo6Srk0-unsplash.jpg" alt="alt tag for the image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' /%3E"> </div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#">Learn More</a></p>
</div>
</div>
<div class="card">
<div class="card-img-scalable">
{{> @lazyimage }}
</div>
<div class="card-body">
{{{ image-card_body }}}
</div>
</div>
{
"image-card_body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p><a href=\"#\">Learn More</a></p>",
"lazyimage_src": "../../img/unsplash/natalya-letunova-AQ5JHo6Srk0-unsplash.jpg",
"lazyimage_alt": "alt tag for the image"
}
.card {
.card-img-scalable {
background-color:var(--grey);
height:0;
overflow:hidden;
padding-top:50%;
position:relative;
width:100%;
z-index:1;
img {
border-radius:4px 4px 0 0;
display:block;
height:100%;
left:0;
object-fit:cover;
object-position:center center;
position:absolute;
top:0;
width:100%;
}
}
}
This card is a variation of the Image Cap card from Bootstrap. This variation uses object fit styles to preserve the aspect ratio of the image used in the card even as the card responds to the size of the viewport.