Як накласти 2 зображення та зробити їх адаптивними [CSS]

Привіт:) У цій короткій замітці покажу простий спосіб як за допомогою CSS накласти одне зображення на інше та зробити цей блок адаптивним.

Image 1 Image 2
<div class="images">
     <img src="https://picsum.photos/300/300?random=1" alt="Image 1">
     <img src="https://picsum.photos/300/300?random=2" alt="Image 2">
</div>
.images {
     display: grid;
     max-width: 600px;
     aspect-ratio: 1/1;
     padding: 25px;
     outline: 2px solid red;
}

.images > img {
     grid-area: 1/1;
     width: 80%;
     aspect-ratio: 1/1;
     object-fit: cover;
}

.images > img:nth-child(2) {
     place-self: end end;
}

Деякі пояснення до коду:

  • використовується Grid-сітка;
  • CSS властивість aspect-ratio: 1/1 задає співвідношення сторін контейнера як квадрат (1:1);
  • grid-area: 1/1 — обидва зображення розміщуються в одній і тій же зоні сітки, щоб накладатись одне на одне;
  • object-fit: cover — пропорційне відображення картинок;
  • place-self: end end — розміщення другого зображення у нижньому правому куті контейнера.

Джерело

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *