Как создать сетку фотографий с фиксированной высотой для каждой строки? ⇐ CSS

[Anonymous]

В настоящее время я пытаюсь создать сетку изображений, в которой каждая строка имеет заданную высоту, а изображение должно использовать 100% ширины. Все изображения имеют формат 4:3 или 9:16. Чего я пытаюсь избежать, так это того, чтобы какая-либо часть фотографии переполнялась и была скрыта. Я использую следующий js 15.
Пример того, что я хотел описать, можно увидеть на https://www.skylerknutzen.com/stills


Я использую next js, и это мой текущий код для компонента коллажа и это CSS:

Код: Выделить всё

import Image from 'next/image';
import styles from '@/components/collage.module.css';

const images = [
{ src: '/images/vertical1.jpg', alt: 'Vertical Image 1', orientation: 'vertical' },
{ src: '/images/horizontal1.jpg', alt: 'Horizontal Image 1', orientation: 'horizontal' },
{ src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
{ src: '/images/horizontal2.jpg', alt: 'Horizontal Image 2', orientation: 'horizontal' },
{ src: '/images/horizontal2.jpg', alt: 'Horizontal Image 2', orientation: 'horizontal' },
{ src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
{ src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
];

const Collage: React.FC = () => {
return (

{images.map((image, index) => (



))}

);
};

export default Collage;

Код: Выделить всё

.collageGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px; /* Adjust as needed for even spacing */
padding: 50px;
}

.imageWrapper {
position: relative;
overflow: hidden;
width: 100%;
}

.vertical {
grid-row: span 2; /* Vertical images span two rows */
}

.horizontal {
height: 100%; /* Horizontal images fit within a single row */
}

.image {
width: 100%;
height: 100%;
object-fit: cover;
}

[img]https: //i.sstatic.net/TpNH3ANJ.png[/img]

Редактировать 1:
Вот что я себе представляю:



Подробнее здесь: https://stackoverflow.com/questions/791 ... r-each-row