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

Question

Подскажите, как сделать, что при уменьшении окна, картинки оставались вместе с текстом, через медиа это писать - запариться можно, потому что писать каждый пиксель не вариант, а съезжают картинки при каждом пикселе все выше и все левее, скрины прикрепил, прошу помочь

HTML

    <div class="glavna">
    <div class="text">
        <a>Быстрые <br>займы на карту</a>
    </div>

    <div class="img">
        <div class="img1">
            <img src="/aaas/Frame 385.png">
        </div>
        <div class="img2">
            <img src="/aaas/Frame 384.png">
        </div>
    </div>
</div>

CSS

.img1 {
    padding-left: 17%;
    padding-top: 2.3%;
}

.img2 {
    padding-left: 3.5%;
    padding-top: 4.5%;
}

Прошу помочь

Answer 1

Пробуй так

.glavna {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px;
}

.text {
    flex: 1;
}

.img {
    display: flex; 
    flex: 1;
    justify-content: flex-end;
}

.img1, .img2 {
    margin-left: 10px;
}

img {
    max-width: 100%;
    height: auto;
}

В кратце о том, что добавилось:

В твоем контейнере .glavna добавил Flexbox - c помощью него элементы располагаются как бы в строку + адаптируются к размеру экрана;

Свойство flex:1 - элементы занимают все пространство;

Свойство flex-wrap - перенос строк;

Ну и для адаптации изображений свойства max-width:100%, height:auto

БЛОГ НА HUSL

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

Ответы (1 шт):

Пробуй так