Как растянуть картинку по всему div если в нем несколько картинок

Question

    .container{
        position: absolute;
        width: auto;
        height: auto;
        border: solid 1px black; 
    }
    .row{
        display: flex;
        flex-direction: row;
        vertical-align: top;
        float: left;
        height: 500px;
    }
    .column{
        display: flex;
        flex-direction: column;
        vertical-align: top;
        float: left;
        height: 50%;
    }
    img
    {
        width: auto;
        height: 100%;
        object-fit: contain;
        object-position: left top;
    }

<div class="container">
        <div class="row">
            <img src="https://cdnb.artstation.com/p/assets/images/images/024/611/027/large/evgeny-bubley-teyzin-tunon.jpg?1582973066" class="img">
            <div class="column">
                <img src="https://games.mail.ru/hotbox/content_files/gallery/0b/91/tyranny_05bf762f.jpeg" class="img">
                <img src="https://games.mail.ru/hotbox/content_files/gallery/0b/91/tyranny_05bf762f.jpeg" class="img">  
            </div>
        </div>
    </div>

На данный момент у меня 2 img помещаются через 50% width. Но мне нужно, чтобы все само подстраивалось. То есть я добавляю еще один img и он помещается на один уровень height.

Answer 1

        .container {
            position: absolute;
            width: auto;
            height: auto;
            border: solid 1px black;
        }

        .row {
            display: flex;
            flex-direction: row;
            vertical-align: top;
            float: left;
            height: 500px;
        }

        .column {
            display: grid;
            grid-template-rows: repeat(auto-fit, 1fr);
            grid-template-columns: repeat(auto-fit, 1fr);

        }

        img {

            width: auto;
            height: 100%;
            object-fit: contain;
            object-position: left top;
        }

        .column img {
            display: block;
        }

<div class="container">
        <div class="row">
          
            <img src="https://cdnb.artstation.com/p/assets/images/images/024/611/027/large/evgeny-bubley-teyzin-tunon.jpg?1582973066" class="img">
          
            <div class="column">
              
                <img src="https://games.mail.ru/hotbox/content_files/gallery/0b/91/tyranny_05bf762f.jpeg" class="img">
                <img src="https://games.mail.ru/hotbox/content_files/gallery/0b/91/tyranny_05bf762f.jpeg" class="img">  
                <img src="https://games.mail.ru/hotbox/content_files/gallery/0b/91/tyranny_05bf762f.jpeg" class="img">  
            </div>
        </div>
    </div>

Вам нужны не флексы ,а grid css конкретно свойство по высоте тоесть строки grid-template-rows, если нужно такше по ширине сделать то это колонки конкретно grid-template-columns

БЛОГ НА HUSL

Как растянуть картинку по всему div если в нем несколько картинок

Ответы (1 шт):