Как обрезать картинку в grid, чтоб не нарушить адаптивность?

Question

[FinnyTheHuman]

Решение от The Wizard of Oz:


Прошу помочь с моей проблемой.
Имеется грид

Нужно чтоб все картинки обрезались с соотношением сторон 16:9, и при этом оставались адаптивными.

Пример того как не надо:

Структура grid'a такова:

<div class="wrapper">
    <article class="video">
      <img class="video__miniature" src="{{ video.cover }}">
      <div class="video__description">
        <h1 class="video__title">{{ video.name }}</h1>
        <div class="video__metrics">
            <p class="video__metrics_views">{{ video.view }}<i class="far fa-eye"></i></p>
            <p class="video__metrics_likes"><i class="far fa-thumbs-up"></i>{{ video.rate }}</p>
        </div>
      </div>
    </article>
  </a>
</div>

CSS у wrapper'а такой:

display: grid;
grid-gap: 36px 16px;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));

Заранее, большое спасибо!

Comments

[Ankhena]

Как обрезать картинку в grid, чтоб не нарушить адаптивность?

Точно также как без грид.
Пропорции блоков (на примере квадрата)
https://jsfiddle.net/Ankhena/cLhxv7eq/
И object-fit

Альтернатива: если вариант подходит, можете задавать размеры в vw.

[FinnyTheHuman]

Ankhena,
Пример с блоками не подходит, потому что, соответственно, работает только на блоках. У меня в коде у картинок нет wrapper'ов в виде div'ов.
vw, не подходит

[Ankhena]

FinnyTheHuman, значит, придется обернуть ;) По возможности, в figure.

[Ankhena]

FinnyTheHuman, И кстати, выложите код в песочницу.
Чтобы было очевидно, почему не подходят vw.

[FinnyTheHuman]

Ankhena, Я скинул codepan копии грида с сайта в шапке. Попробуйте, может я дурак).

[FinnyTheHuman]

Ankhena, Единственный вариант который я вижу это через calc высчитывать пропорцию для высоты и потом использовать object-fit: cover.То есть - width*9/16. Но я не знаю можно ли в calc использовать width и к тому же ширина не имеет точного значения в css, а указана в процентах.

[Ankhena]

FinnyTheHuman, Что-то в таком духе: https://jsfiddle.net/y9wpn41h/ Ну и придется использовать media.

С minmax так не выйдет (мне кажется).
Если он реально нужен, то проще посчитать высоту на js. Это будет короче.

[Ankhena]

FinnyTheHuman,
И заметно проще делать это с оберткой картинки. Тогда и минмакс будет работать.