Как разместить изображения чтобы они отображались квадратными

[alleclf]

Есть несколько изображений, как горизонтальные так и вертикальные. Как их можно выстроить в ряд так, что бы все они стали квадратными. То есть, растянуть картинку меньшей стороной по размеру блока, а та часть что вылазит из блока - скрыть. Вместо продолговатой картинки отобразить только ее середину в форме квадрата.

Вот пример, но это не совсем то, надо чтобы картинки масштабировались а там просто отображается верхний угол - https://jsfiddle.net/jk8todrq/

 

[Igor Schnaider]

Воспользуйтесь свойством object-fit: https://jsfiddle.net/xzs1bv7k/

[alleclf]

03.07.2022 в 04:40, Igor Schnaider сказал:

Воспользуйтесь свойством object-fit: https://jsfiddle.net/xzs1bv7k/

Спасибо, то что надо.

Ещё хотел узнать, можно ли сделать что бы картинки помещались целиком в заданную область (в квадрат). То есть, у вертикальных изображений отступы слева-справа картинка в центре, у горизонтальный изображений отступы сверху-снизу картинка в центре.

[Switch74]

object-fit: contain;

 

[alleclf]

Не могу понять можно ли как-то во флексах реализовать перенос ниже элементов которые не влезают в выделенную область.

Вот пример:

https://jsfiddle.net/xostfzj6/1/

В область влезает ровно 4 элемента. Как сделать чтобы остальные размещались ниже? В 2 или больше строк (смотря сколько картинок).

[Switch74]

flex-wrap: wrap;

 

[alleclf]

01.08.2022 в 14:18, Switch74 сказал:

flex-wrap: wrap;

Не совсем работает. Если количество картинок не кратно числу в одной строке то последние произвольно растягиваются. Например, в одном рядке 4 элемента, всего элементов 9. То первые 8 элементов правильно распределятся в 2 рядка а в третьем будет один элемент размером на весь рядок.

[Igor Schnaider]

11 часов назад, alleclf сказал:

а в третьем будет один элемент размером на весь рядок.

Ну так сами установили flex-grow в 1.