Как склеить 2 изображения между собой? - Html, CSS

Возможность объединения нескольких изображений в одно позволяет создавать креативные и оригинальные элементы для веб-страниц. Эта статья поможет разобраться, как склеить 2 изображения между собой с помощью Html и CSS.

Html

Для объединения изображений необходимо создать контейнер-обертку, который будет содержать элементы img. Вариантов создания контейнера много, мы остановимся на простом - div с классом container.

<div class="container">
    <img src="first-image.jpg">
    <img src="second-image.jpg">
</div>

Пример содержимого контейнера, в котором расположены 2 элемента img.

CSS

Далее мы зададим стили для контейнера и для элементов img внутри него. В этом примере мы будем использовать свойства display: flex; и justify-content: space-between;.

.container {
    display: flex;
    justify-content: space-between;
}

.container img {
    width: 50%;
    height: auto;
}

Стилизация контейнера и элементов img.

display: flex; - заставляет элементы располагаться в одной линии;
justify-content: space-between; - устанавливает промежуток между элементами img, который равен расстоянию между элементами и краем контейнера;
width: 50%; и height: auto; - задают размер изображений и пропорционально его изменяют, чтобы сохранить естественную ширину и высоту изображения.

Заключение

Таким образом, склеивание изображений в Html и CSS достаточно просто. С помощью контейнера-обертки и стилизации элементов img, вы можете создавать креативные и оригинальные компоненты для своих веб-страниц.