Как сделать чтоб изображения в grid сетке уменьшались в размерах при сужении?
Нужно чтоб вот эти элементы галереи уменьшались в размерах пропорционально. Какие свойства можно добавить в код?
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> |
<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; } |
.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; }
Дополнительно:
Вместо px использовать fr.
Или другие относительные единицы измерения.
Нужно чтоб картинки уменьшались при сужении ширины экрана.
Ну и что нужно написать, чтобы картинка была по размеру родителя?
Ещё до кучи есть object-fit, чтобы было совсем хорошо и надежно.
. По вашей рекомендации изображения сужаются по другому. Вот так
Ну давайте поговорим
1. Я вообще ничего не говорила про высоту.
2. В демке в вопросе высота не меняется.
3. В демке как бы из моего ответа меняется (несмотря на п1)
Нужна фиксированная высота - задавайте фиксированную.
4. Со строками тоже нужно работать. У вас же каждая картинка занимает одну строку.
5. Ещё я там говорила про object-fit. Рекомендую всё таки почитать.
Сначала, перед тем как писать css, нужно разобраться с геометрией и проговорить словами что и как должно себя вести.
Ответы:
ширину грид элементов указывай в fr или % ,
на картинки делай object-fit: cover
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы изображения в grid сетке уменьшались в размерах при сужении, можно использовать CSS свойство `max-width: 100%` для изображений.
Пример использования этого свойства в CSS:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .grid-container img { max-width: 100%; height: auto; }
В данном примере мы определяем контейнер сетки с двумя колонками и применяем стиль для изображений внутри этого контейнера. Свойство `max-width: 100%` гарантирует, что изображения не будут выходить за пределы своего контейнера при сужении экрана, сохраняя при этом свои пропорции.
Таким образом, при сужении экрана изображения будут автоматически уменьшаться в размерах, чтобы сохранить сетку гибкой и адаптивной к различным устройствам и разрешениям экранов.