Как вписать изображения большего размера, что бы разметка не ломалась?

Question

[Leel Usama]

В теории надо сделать грид 4 на 6 ячеек , что бы они вписывались в экран устройства. И внутри них вставить картинки, которые вписывались внутрь. Или такое не возможно без указания точных размеров.
https://codepen.io/leelusama/pen/wvPewqy

Answer 1

[Ivan Bogachev]

вписать изображения большего размера, что бы разметка не ломалась

Можно что-то такое сделать:

.inv-cell {
    position: relative;
}

img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Весь вопрос тут будет скорее не в размере картинок, а в их пропорциях. Если вы привязываете саму сетку к пропорциям экрана - она 100% будет расходиться с пропорциями картинок внутри в ту или иную сторону. Если это какие-то формальные фоточки, то object-fit решит вопрос, если же это превьюшки для фильмов с текстами или еще чем-то, что нельзя отрезать - то будет вопрос по самой концепции к дизайнеру, и его нужно будет решать с ним.

Comments

[Leel Usama]

То, что нужно, ячейки не выходят за рамки по вертикали. object-fit сделал contain. В чем "магия" с position?

[Ivan Bogachev]

Это лишнее

Ankhena, не совсем. Это меняет логику работы сетки и делает ее непробиваемой вне зависимости от размера экрана и картинок. Если убрать сброс позиционирования - то мы получим эффект, что оно работает на маленьких и высоких экранах, но появляется скролл на низких и широких. А автору исходя из вопроса как раз это переполнение и не нужно было.

[Ankhena]

Ivan Bogachev, а ну логично, мы же в окно всю сетку хотим вписать.
Тогда действительно не лишнее :)

[Leel Usama]

Нашел вот такое решение grid-auto-rows: minmax(0%, 1fr);