Як накласти 2 зображення та зробити їх адаптивними [CSS]
Привіт:) У цій короткій замітці покажу простий спосіб як за допомогою CSS накласти одне зображення на інше та зробити цей блок адаптивним.
<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
— розміщення другого зображення у нижньому правому куті контейнера.