Gorzzoth
@Gorzzoth

Как расположить переход блоков изображением формата svg?

65bbf2f4aa7b8820226959.png
МАКЕТ: figma
Столкнулся с проблемой, что никак не могу расположить это svg изображение слева внизу в родительском блоке header-top
65bbf43b2449d617099408.png
Пробовал подобные варианты, но ничего не выходило
.header__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 228px;
}

65bbf3eb3df5a594555850.png
Пытался выставлять ширину в 100%, минимальную ширину, но ничего не помогает, как и preserveAspectRatio в самом svg
Важно сохранить 228px высоты, т.к. в мобильной версии это изображение нельзя сужать
65bbf5149a23d510738535.png
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
Gorzzoth
@Gorzzoth Автор вопроса
Нужно было задать размер в оригинальный элементу, а при его увеличении сделать медиа запрос, где ширина будет равна 100%
https://youtu.be/0l4Nsp5L9wk
.header__top::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    min-width: 1600px;
    height: 228px;
    background-image: url(../img/header_bottom.svg);
}

@media (min-width: 1600px) {
    .header__top::after {
        width: 100%;
    }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы