Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?

objective состоит в том, чтобы элемент расширялся до размера его родительского контейнера, в этом случае

, независимо от того, насколько большой или маленький этот контейнер может быть.

Код:

  svg, #container{ height: 100%; width: 100%; }  

Наиболее распространенным решением этой проблемы является установка атрибута viewBox в viewBox .

 viewBox="0 0 widthOfContainer heightOfContainer" 

Однако это не работает в тех случаях, когда элементы в элементе имеют предопределенные ширины и / или высоты. Например, элемент в приведенном выше коде имеет явно заданную ширину и высоту.

Таким образом, очевидным решением является использование% width и% высот для этих элементов. Но это даже нужно сделать? Тем более, что работает нормально и разворачивает / без каких-либо проблем с явно установленными высотами и шириной .

Если такие элементы, как и другие подобные ему элементы, должны иметь ширину и высоту, определенные в процентах, есть способ в Inkscape установить его так, чтобы все элементы с документом использовали процентную ширину, высоту и т. Д. .. вместо фиксированных размеров?

viewBox – это не высота контейнера, а размер вашего рисунка. Определите, что ваш viewBox в 100 единиц, а затем укажите, что ваш rect равен 10 единицам. После этого, насколько бы вы не масштабировали SVG, rect будет составлять 10% ширины изображения.

Предположим, у меня есть SVG, который выглядит так: pic1

И я хочу поместить его в div и заставить его заполнить div в ответ. Мой способ сделать это следующим образом:

Сначала я открываю SVG-файл в приложении, таком как inkscape. В «Файл-> Свойства документа» установите ширину документа на 800 пикселей и высоту до 600 пикселей (вы можете выбрать другие размеры). Затем я вписываю SVG в этот документ.

pic2

Затем я сохраняю этот файл как новый SVG-файл и получаю данные пути из этого файла. Теперь в HTML код, который делает магию, выглядит следующим образом:

 

Обратите внимание, что ширина и высота SVG равны 100%, так как мы хотим, чтобы он заполнил контейнер вертикально и горизонтально, но ширина и высота viewBox совпадают с шириной и высотой документа в inkscape, который равен 800px X 600px. Следующее, что вам нужно сделать, это установить для параметра preserveAspectRatio значение «none». Если вам нужна дополнительная информация об этом атрибуте, это хорошая ссылка . И это все, что нужно.

Еще одна вещь заключается в том, что этот код работает почти во всех основных браузерах, даже в старых, но в некоторых версиях Android и ios вам нужно использовать код javascrip / jQuery, чтобы он был согласован. Я использую следующие функции в готовых и изменяемых документах:

 $('#svgId').css({ 'width': $('#containerId').width() + 'px', 'height': $('#containerId').height() + 'px' }); 

Надеюсь, поможет!

В последнее время мне удалось удалить все атрибуты height="" и width="" из и всех дочерних тегов. Затем вы можете использовать масштабирование, используя процент от высоты или ширины родительского контейнера.

@robertc имеет это право, но вы также должны заметить, что svg, #container заставляет svg масштабироваться экспоненциально для чего угодно, кроме 100% (один раз для #container и один раз для svg ).

Другими словами, если бы я применил 50% ч / б к обоим элементам, это фактически 50% от 50% или .5 * .5, что равно шкале 25 или 25%.

Один селектор отлично работает при использовании, как предлагает @robertc.

 svg { width:50%; height:50%; } 

Для вашего iphone Вы можете использовать в своем лицевом баласте:

 "width=device-width" 
  • Простая страница Bootstrap не реагирует на iPhone
  • Как я могу избежать перекрытия медиа-запросов?
  • Почему порядок запросов в СМИ имеет значение в CSS?
  • Отзывчивый размер шрифта
  • css grid квадратов с flexbox
  • Жидкость или система с фиксированной сеткой, в гибком дизайне, основанная на Twitter Bootstrap
  • Поддерживать соотношение сторон в соответствии с высотой
  • Изменение точки останова на панели навигации при загрузке без использования МЕНЬШЕ
  • Переупорядочивание divs с помощью Twitter Bootstrap?
  • Масштабирование шрифтов по ширине контейнера
  • загрузочная таблица 3 с фиксированной первой колонкой
  • Interesting Posts
    Давайте будем гением компьютера.