duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.

Как увеличить svg, чтобы адаптив не сказал пока?

У меня есть иконка, она изначально не маленькая, но если другой блок будет ее жать:
5eaf077cdac1c385859445.jpeg
то она сразу уменьшается. Как ее увеличить до изначального размера, чтобы еще не вылезало за грани сетки?
Вот так нужно:
5eaf08fcd6b33465475526.jpeg
  • Вопрос задан
  • 409 просмотров
Решения вопроса 2
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Иконка явно "украшательного" характера и не несет никакой феноменальной смысловой нагрузки. Поэтому сделайте её background-image: contain. И ваша картинка будет уменьшаться пропорционально блоку.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
SVG по своей сути и названию масштабируемая графика. При интеграции ее в тело документа ты указываешь ей фактические размеры (хотя бы для одного из брекпойнта). Если же интегрируешь с помощью object, то max-width:100%, таким образом SVG будет всегда вписана в область, которая ей отведена.

Следовательно, в конечном счете размер вектора зависит от родителя (если ты не накосячил, конечно).

Исходя из этого ты можешь абсолютно позиционировать родителя SVG таким образом, чтобы он занимал столько места от секции, сколько есть в макете. При этом, врядли тебе будет доступен z-index:-1, тогда тебе необходимо будет задать родителю SVG (или ей самой, если ты без родителя обошелся) z-index:0, а форме свойства position:relative;z-index:1;, чтобы она [форма] могла «лечь» поверх пикчи.

Фоном делать не рекомендую, так как в случае с SVG ты потеряешь возможность точно управлять ей.

А начать постигать дзен SVG можно отсюда.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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