нужна помощь в понимании css сетка с переменными размерами изображений - PullRequest
Новая
       70

нужна помощь в понимании css сетка с переменными размерами изображений

0 голосов
/ 05 мая 2020

абсолютный css новый ie здесь. все уроки и примеры, которые я находил за последние три дня, прекрасно объясняют, как настроить галерею изображений с использованием сетки с изображениями аналогичного размера, но я не могу понять, как настроить ее с изображениями переменного размера без ужасных пробелов под изображениями меньшего размера, как здесь: ужасные пробелы

Я пробовал использовать все в соответствии с объектно-подходящими объектами, но ничего не работает. Я знаю это, потому что я что-то сильно не понимаю. Я бы хотел, чтобы моя галерея изображений выглядела так: this mosai c галерея изображений и чтобы понять, как это сделать sh. Я могу легко сделать что-то подобное, когда это просто куча пустых ящиков, но по какой-то причине, когда изображения попадают в микс, я этого не понимаю.

вот мои html: 

<div class="gallery">
            <img src="images/img-1.jpg" alt="nature">
            <img src="images/img-2.jpg" alt="nature">
            <img src="images/img-3.jpg" alt="nature">
            <img src="images/img-4.jpg" alt="nature">
            <img src="images/img-5.jpg" alt="nature">
        </div>

и css: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.gallery{
    display: grid;
    grid-template-areas:
    'img-1 img-2 img-3'
    'img-4 img-5 .';
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1rem;
}

img{
    display: block;
    overflow: hidden;
    width: 100%;
}

img-1{
    grid-area: img-1;
}

img-2{
    grid-area: img-2;
}

img-3{
    grid-area: img-3;
}

img-4{
    grid-area: img-4;
}

img-5{
    grid-area: img-5;
}

Я пробовал смотреть похожие ответы, которые хотят, чтобы я установил свой img {ширина: авто; height: 100%}, и когда я это сделаю, все исчезнет с экрана, и у меня останется пустая страница.

любая помощь приветствуется!

...