Как сделать чтоб изображения в grid сетке уменьшались в размерах при сужении?

Question

[Overlord934]

Нужно чтоб вот эти элементы галереи уменьшались в размерах пропорционально. Какие свойства можно добавить в код?
HTML

<section class="gallery">
        <div class="container">
            <div class="gallery__inner">
                <div class="gallery__item gallery__item-1">
                    <img src="images/gallery-img-1.png" alt="">
                </div>
                <div class="gallery__item gallery__item-2">
                    <img src="images/gallery-img-2.png" alt="">
                </div>
                <div class="gallery__item gallery__item-3">
                    <img src="images/gallery-img-3.png" alt="">
                </div>
                <div class="gallery__item gallery__item-4">
                    <img src="images/gallery-img-4.png" alt="">
                </div>
                <div class="gallery__item gallery__item-5">
                    <img src="images/gallery-img-5.png" alt="">
                </div>
                <div class="gallery__item gallery__item-6">
                    <img src="images/gallery-img-6.png" alt="">
                </div>
                <div class="gallery__item gallery__item-7">
                    <img src="images/gallery-img-7.png" alt="">
                </div>
                <div class="gallery__item gallery__item-8">
                    <img src="images/gallery-img-8.png" alt="">
                </div>
                <div class="gallery__item gallery__item-9">
                    <img src="images/gallery-img-9.png" alt="">
                </div>
                <div class="gallery__item gallery__item-10">
                    <img src="images/gallery-img-10.png" alt="">
                </div>
                <div class="gallery__item gallery__item-11">
                    <img src="images/gallery-img-11.png" alt="">
                </div>
                <div class="gallery__item gallery__item-12">
                    <img src="images/gallery-img-12.png" alt="">
                </div>
                <div class="gallery__item gallery__item-13">
                    <img src="images/gallery-img-13.png" alt="">
                </div>
                
                
            </div>
        </div>
    </section>

CSS

.gallery__inner {
    display: grid;
    grid-template-columns: 443px 197px 328px 328px 407px;
    grid-template-rows: 408px 141px 188px 196px 252px;
    column-gap: 10px;
}

.gallery__item img {
    
}

.gallery__item-1 {
    grid-column-start: 1;
    grid-row-start: span 2;
    

}

.gallery__item-2 {
    grid-column-start: 2;
    grid-row-start: 1;
    
}

.gallery__item-3 {
    grid-column-start: 3;
    grid-row-start: 1;
    
}

.gallery__item-4 {
    grid-column-start: 4;
    grid-row-start: 1;
    
}

.gallery__item-5 {
    grid-column-start: 5;
    grid-row-start: span 2;
    
}

.gallery__item-6 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 20px;
    
}

.gallery__item-7 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: 3px;
    margin-left: 20px;
    
}

.gallery__item-8 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-left: 145px;
    margin-top: 17px;
    
}

.gallery__item-9 {
    grid-column-start: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 135px;
   
}

.gallery__item-10 {
    grid-column-start: 1;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 143px;
    
}

.gallery__item-11 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 70px;
    
}

.gallery__item-12 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-left: 210px;
    margin-top: 25px;
    
}

.gallery__item-13 {
    grid-column-start: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    margin-top: 210px;
    
}

Comments

[Ankhena]

Вместо px использовать fr.
Или другие относительные единицы измерения.

[Overlord934]

Ankhena, но если использовать fr будет уменьшаться сетка, но не изображения. Не влезающие изображения будут создавать нижний скролл. Нужно чтоб картинки уменьшались при сужении ширины экрана.

[Ankhena]

Overlord934,

Нужно чтоб картинки уменьшались при сужении ширины экрана.

Ну и что нужно написать, чтобы картинка была по размеру родителя?

[Overlord934]

Ankhena, в теории - прописать ширину 100%

[Ankhena]

Overlord934, в практике аналогично.
Ещё до кучи есть object-fit, чтобы было совсем хорошо и надежно.

[Overlord934]

Ankhena, не получилось сужение как на этой гифке . По вашей рекомендации изображения сужаются по другому. Вот так

[Ankhena]

Overlord934,

Ну давайте поговорим
1. Я вообще ничего не говорила про высоту.
2. В демке в вопросе высота не меняется.
3. В демке как бы из моего ответа меняется (несмотря на п1)

Нужна фиксированная высота - задавайте фиксированную.

4. Со строками тоже нужно работать. У вас же каждая картинка занимает одну строку.
5. Ещё я там говорила про object-fit. Рекомендую всё таки почитать.

Сначала, перед тем как писать css, нужно разобраться с геометрией и проговорить словами что и как должно себя вести.

Answer 1

[dicem]

ширину грид элементов указывай в fr или % ,
на картинки делай object-fit: cover