I'm using the card component in Bulma and I want the card image to have a 16:9 aspect ratio. However, the images will be coming in dynamically, so I won't always be able to resize the images to ensure their dimensions.
So, what I'm hoping is that the image element could act like a crop or mask. If, for example, the image itself is a square, the top and bottom would simply be masked out. For example...
<div class="card">
<div class="card-image">
<figure class="image is-16by9">
<img src="a square image goes here" alt="Placeholder image">
</figure>
</div>
<div class="card-content">...</div>
</div>
When I try this, though, it distorts the image. I could play around with some overrides, but I want to make sure I'm not missing something about Bulma's image element or helpers before I do that. Thanks!