Image elements distorting when resizing in a Boots

Question

I have a bootstrap grid set up to show 4 video thumbnails in a row (linking to a Lightbox to play the video) but the thumbnails are being squished. (Shared House Episodes) How can I crop the thumbnails instead?

The current code I have in place is

HTML

<div class="col-md-3 col-sm-6 col-xs-6">
  <div class="box-watch">
    <a id="videoid" href="#" description="videodescription." ref="videourl" class="watch-video" type="youtube" >
      <div class="box-watch-img">
        <img src="imagethumbnail.jpg" />
      </div>
      <div class="box-watch-internal">
        <div class="title">Episode 1</div>
      </div>
    </a>
  </div>
</div>

CSS

@media (min-width: 992px){
  .col-md-3 {
    width: 25%;
  }
}

When I update the width to 33%, it gives me the correct looking dimensions, but obviously puts the grid out of whack. I don't mind if I have to crop the image rather than uniformly scale it down but no code I have tried so far is allowing me to achieve that.

I replaced the width:25% property with object-fit: cover; and the image just went full size rather than constrained in the column. I also tried adding the 'object-fit' beneath 'width' to use in conjunction but had no result either.

Answer 1

Making sure I had the image source selected to show me where the relevant CSS code was rather than having the entire div class selected allowed me to place the object-fit: cover tag and have it effect the relevant thumbnails in the table.