Курсы javascript
Всем привет!
Есть блок с svg, там прописан путь path. В данном случае это контур Крыма.
Как растянуть Крым в svg на всю ширину и длину блока div?
Вот что требуется. Думаю так нагляднее будет:
04.08.2020, 03:01
Регистрация: 14.01.2015
Сообщений: 12,990
Вы его воткнули в документ маленькой крохой и пытаетесь масштабировать, забывая о том, что он в рамках объекта.
.box < width: 600px; border: 1px solid red; >.box svg
Здесь документ имеет размер svg (изменено) и масштабирование посредством css по родителю.
Последний раз редактировалось laimas, 04.08.2020 в 04:47 .
Растянуть SVG по ширине
Растянуть ul li по ширине
Есть див times, в нем список Как мне его растянуть по ширине дива? <div > <ul.
Растянуть блоки по ширине
Ребята, выручайте. 2 дня не могу сверстать табы. В принципе если бы была одноуровневая менюшка, то.
В таблице растянуть фон по ширине
Добрый день! Есть горизонтальная таблица: <table width="100%" height="300px"> <tr.
Как растянуть сайт по ширине?
Добрый день! Сделал сайт на маке (там все норм отображается), но столкнулся с проблемой. При.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Растянуть баннер по ширине страницы
Добрый день! Делал себе баннеры на flash и as3, как вдруг гугл закрыл swiffy(применялась для.
Растянуть svg на весь экран
Привет. Подскажите, пожалуйста, как растянуть svg на весь экран и возможно ли это вообще. Например.
Растянуть inline-div по ширине родителя
Добрый вечер. Возникла проблемка с inline блоками. Есть код: <html> <head> <meta.
Растянуть сайт на весь экран по ширине
Добрый день, знакомый попросил доработать сайт. Сайт очень узкий, а он хочет, что бы сайт был по.
Как растянуть SVG картинку только по высоте при фиксированной ширине
Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его “уголок” был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания svg по одной из сторон, поэтому в качестве предполагаемого результат добавлю только изображение:
Кратко общими словами: конструкция состоит из прямоугольного div’a и svg – уголка справа. Так вот при первичном решении svg никак не удавалось растянуть исключительно по высоте, оставив фиксированную ширину. Решение нашлось в атрибуте:
preserveAspectRatio = «none»
указав который к тегу svg, изображением стало возможным управлять, устанавливая различную ширину и высоту картинки.
See the Pen OvZJrP by Sergey (@norzserge) on CodePen.
Надеюсь, что моя запись натолкнет кого-нибудь на решение своей не тривиальной задачи. Всем удачи!
P.S. К слову сказать, до решения с растягиванием SVG были предприняты попытки:
– добавить блок с background картинкой-уголком, но при растягивании бэкграунда, картинка заметно искажалась – fail
– нарисовать в background этот треугольник градиентом, но при растягивании сторона треугольника превращалась в лесенку – fail
– вариант с псевдо элементами подходит только при фиксированной высоте блока, в котором находится контент, так что тоже не прокатило
– еще пара извращений, о которых даже писать не хочу
В общем самым действенным оказалось использование svg с атрибутом preserveAspectRatio=”none”
Растянуть текст по длине блока
Есть несколько способов растянуть текст по ширине блока или страницы адаптивным образом.
1. Использование css-трансформации scale
Данный код позволяет менять размер шрифта в зависимости от ширины браузера:
Произвольный текст
// script.js var $window = $(window), $body = $('body'), $wrap = $('.wrap'), defaultWidth = 1000; $window.resize(function () < $wrap.css(); var height = $wrap.outerHeight(true); >).resize();
/* styles.css */ .test
Немного доработав код, вы можете растянуть текст не только на всю длину страницы, но и на длину конкретного блока.
2. Использование параметра font-size
Есть ещё другой способ заставить шрифт растягиваться по длине блока:
Произвольный текст
// script.js $(function () < var $test = $('.test'); var k = 1; $(window).resize(function()< var val = $test.width(); $test.css('font-size', Math.floor(val/k)+'%'); >).resize(); >);
Метод основан на использовании css-параметра font-size . Параметром k подгоняется шрифт под размеры блока. Имейте ввиду, что значение font-size , выраженный в процентах, вычисляется не от ширины блока, а от размера шрифта родительского блока, поэтому параметр k подгоните под себя.
3. Использование svg
Данный способ хорош тем, что не нужно использовать javascript. В данном пункте приведу более сложный пример использования svg: будем использовать многострочный текст, выравненный по центру.
Добавляем svg-код на страницу html:
/* styles.css */ .svg_test text
Смысл такого способа в том, что мы растягиваем наш svg на всю ширину блока, используя width=»100%» , а для каждого текстового элемента задаём перемещение по оси X в 50%, и наконец, добавляем text-anchor: middle; для выравнивания текста относительно заданного перемещения по оси X. Опять таки, и здесь нужна подгонка параметром.
В каждом представленном способе есть свои плюсы и минусы. Однозначно точно растянуть текст по ширине, как вы видите, не получится. Придётся всё равно подгонять размер шрифта под длину блока. Но тем не менее, подогнав размер под свой блок, вы получите резиновый текст, который адаптируется под различные устройства.
Если же вы хотите точно подогнать шрифт по длине блока, то используйте текст как картинку. Конечно, это извращение, и имеет смысл использовать это при крайней необходимости.