Искажение элементов изображения при изменении размера в сетке начальной загрузки

Question

У меня есть сетка начальной загрузки , чтобы показывать 4 миниатюры видео подряд (ссылка на лайтбокс для воспроизведения видео), но миниатюры сокращаются.(Shared House Episodes) Как я могу обрезать миниатюры вместо этого?

Текущий код, который у меня на месте,

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%;
  }
}

Когда я обновляю ширину до 33%, это дает мне правильные размеры, но, очевидно, выводит сетку из строя.Я не против, если мне придется обрезать изображение, а не равномерно уменьшать его, но ни один код, который я пробовал до сих пор, не позволил бы мне этого добиться.

Я заменил свойство width:25% на object-fit: cover;и изображение просто стало полноразмерным, а не ограниченным в столбце.Я также попытался добавить «подгонка объекта» под «шириной» для использования в сочетании, но также не дал результата.

Answer 1

Убедившись, что у меня выбран источник изображения, чтобы показать, где находится соответствующий код CSS, а не выделен весь класс div, я смог поместить тег object-fit: cover и сделать так, чтобы он влиял на соответствующие миниатюры в таблице.