Can Bulma's image element use aspect ratio as a crop / mask?

Viewed 104

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!

0 Answers
Related