Как расположить переход блоков изображением формата svg?
МАКЕТ: figma
Столкнулся с проблемой, что никак не могу расположить это svg изображение слева внизу в родительском блоке header-top
Пробовал подобные варианты, но ничего не выходило
.header__bottom { position: absolute; bottom: 0; left: 0; height: 228px; } |
.header__bottom { position: absolute; bottom: 0; left: 0; height: 228px; }
Пытался выставлять ширину в 100%, минимальную ширину, но ничего не помогает, как и preserveAspectRatio в самом svg
Важно сохранить 228px высоты, т.к. в мобильной версии это изображение нельзя сужать
Дополнительно:
Это вообще не img. В разметке ему делать нечего.
Проще всего сделать псевдо, ему нужный размер, положение и фон. И preserveAspectRatio
Ну либо, даже проще, размер фона поставьте 1600.
Правда, кажется, ваши запросы противоречат друг другу. На счёт фикс высоты и потом про overflow.
Так что, наверное, сначала нужно четко разобраться какого поведения вы ждёте.
Ну и всегда есть media
если задать min width в 1600px,он не будет занимать всю ширину экрана
Логика не ясна. Скажете 100% - будет.
а background size отказывается работать если ширина равна 100% или 100vw как и 1600px
Звучит очень интересно.
Похоже, вам пора делать пример кода на codepen.io
По дороге рекомендую обвести рамочкой ваш псевдо. Потому что при последних ваших требованиях высота псевдо будет фикс, как вы хотите, но высота треугольника нет. Потому что вы хотите чтобы выпирал..
Ankhena, всё заработало на ура!) Огромное спасибо)
а background size отказывается работать если ширина равна 100% или 100vw как и 1600px
Нужно было задать размер в оригинальный элементу, а при его увеличении сделать медиа запрос, где ширина будет равна 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%; } } |
.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%; } }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для расположения переходов блоков изображением формата svg можно использовать следующий подход.
1. Создание SVG-изображения с блоками и переходами между ними. Например, вы можете создать SVG-изображение с прямоугольниками, представляющими блоки, и стрелками, представляющими переходы между блоками.
2. Вставка SVG-изображения в HTML-код вашей веб-страницы. Для этого используйте тег![]()
с атрибутом src, указывающим на путь к вашему SVG-изображению.
Пример кода:
<title>SVG Transition Blocks</title> <h1>SVG Transition Blocks Example</h1> <img src="transition_blocks.svg" alt="SVG Transition Blocks">
3. Создание SVG-изображения с помощью инструментов для работы с векторной графикой, таких как Adobe Illustrator, Inkscape или онлайн-редакторов типа SVG-Edit.
4. Добавление стилей CSS для управления внешним видом SVG-изображения, например, изменение цвета блоков и стрелок, толщины линий и т. д.
Пример кода:
img { width: 100%; height: auto; border: 1px solid black; }
Следуя этим шагам, вы сможете создать и вставить SVG-изображение с блоками и переходами на вашу веб-страницу. Не забудьте также проверить совместимость SVG-изображения с различными браузерами для обеспечения правильного отображения.