Как сделать чтобы при увеличении масштаба размеры не менялись html

Добавил пользователь Alex
Обновлено: 15.09.2024

Полностью отключить масштабирование возможности нет. Если для Вас неудобно автоматическое перемещение и подстраивание области видимых значений, выберите "По всем значениям", тогда область смасштабируется по вертикали только один раз - определив максимальное и минимальное значение цены на графике и установив таким образом масштаб, который не будет меняться при перемещении области влево или вправо (если горизонтальный масштаб был увеличен).

Цитата
Евгений написал: Если на графике есть индикаторы у которых есть горизонтальные линии но эти линии не бесконечны, а например только на 100 свечей, как только конец или начало линий появляется в зоне видимости, то график автомасштабируется и все сжимается.

Цитата

Евгений написал:
Если на графике есть индикаторы у которых есть горизонтальные линии но эти линии не бесконечны, а например только на 100 свечей, как только конец или начало линий появляется в зоне видимости, то график автомасштабируется и все сжимается.

Не совсем понимаем, каким образом это происходит и как это связано с вертикальным масштабированием. Просьба прислать скриншоты с такими эффектами, чтобы лучше разобраться в ситуации и знать, что и как нужно будет изменить.

Да, тоже заметил, что такая особенность присутствует. В настройках графика нигде нет галки "пропорциональный масштаб", чтобы при увеличении/уменьшении (кнопками "+" или "-") пропорции свечей не изменялись. Попробую сделать скриншоты, чтобы было понятней суть проблемы.

Вот именно пропорции размеров свечей меняются. Они внезапно могут растянуться или сжаться и приходится постоянно подстраивать все это. Из за тих косяков нарушается восприятие размеров свечей. Говорю им что надо убрать невозможность отключения масштабирования и сделать просто смещение окна видимости относительно графика, а всякие авто масштабирование убрать

Цитата
Евгений написал: Тоже не понятно как это работает, какая то неведомая логика.

Логика очень простая на самом деле: берется самое большое и самое малое значение из всех свечек и линий которые видно на экране, и подбирается масштаб чтобы эти величины были в самой верхней и самой нижней части графика соответственно.

К разработчикам просьба добавить минимальное масштабирование в шагах цены, по умолчанию 20 например - чтобы вертикальный масштаб был не менее 20 шагов цены. Неплохо бы еще добавить минимум масштаба в процентах от исторического максимума.

Скриншот s1.jpg - Окно настройки отображения графика "Chart settings", там имеется раздел "Scales", параметр: "Lock price to bar ratio" - выставляю его в значение 0,1. Теперь пропорции свечей на графике зафиксированы и не будут изменяться при увеличении/уменьшении масштаба.
Скриншот s2.jpg - Общий вид графика, будем увеличивать область, отмеченную красным прямоугольником.
Скриншот s3.jpg - Увеличенная область из предыдущего скриншота. Видим, что график стал детальнее, крупнее, но пропорции свечей сохраняются, визуально чётко воспринимаются их относительные размеры.
Скриншот s4.jpg - Ещё сильней увеличиваем график, со свечами по прежнему всё нормально, пропорции прежние.
Скриншот s5.jpg - Отключаем фиксированный масштаб, включается автомасштабирование.
Скриншот s6.jpg - Снова видим график общим планом, но пропорции его элементов изменились, он стал более растянутым.
Скриншот s7.jpg - Пытаемся увеличить график, видим знакомую размазню из свечей, такую же как в QUIK.
Скриншот s8.jpg - Размазанные автомасштабированием свечи в QUIK.
Скриншот s9.jpg - Такой должен бы был иметь вид график в QUIK, если бы у него были правильные пропорции (вручную мышкой отмасштабировал за шкалу).

P.S.: вставка картинок на форуме очень неудобная.

Вот спасибо добрый человек!

О чем и речь авто масштабирование меняет пропорции свечей и работать с такими графиками приходится осторожно как бы их не спугнуть чем нибудь, а то концов не найдешь.

Цитата
Евгений написал: Если на графике есть индикаторы у которых есть горизонтальные линии но эти линии не бесконечны, а например только на 100 свечей, как только конец или начало линий появляется в зоне видимости, то график автомасштабируется и все сжимается.

Цитата

Цитата
Евгений написал: Как его отключить это авто масштабирование?

Цитата
Евгений написал: Сделайте возможность отключения автомасштабирования

Автоматический масштаб по вертикали. Выбора нет! В любом случае я попадаю на масштабирование.

Цитата
Evgeniy Karnaukhov написал: Не совсем понимаем, каким образом это происходит и как это связано с вертикальным масштабированием. Просьба прислать скриншоты с такими эффектами, чтобы лучше разобраться в ситуации и знать, что и как нужно будет изменить.

Цитата

Evgeniy Karnaukhov написал:
Не совсем понимаем, каким образом это происходит и как это связано с вертикальным масштабированием. Просьба прислать скриншоты с такими эффектами, чтобы лучше разобраться в ситуации и знать, что и как нужно будет изменить.

Цитата
Евгений написал: Да похоже что эта опция исключает индикатор из автомасштабирования если оно включено.

Нет ну правильно, если есть автомасштабирование то и должно быть что масштабировать. Например график цены.
Его точно нужно оставить. А вот другие индикаторы можно не учитывать в автомасштабировании если у них например далекие от текущей цены значения. Что бы не происходило искажения свечей при манипуляциях с графиком и включенной опцией по видимым значениям.

То о чем вы говорите это если сжимать их по правой /левой вертикальной шкале мышкой.
Просто это более тонкая настройка.
А то что свечи сжимаются по ширине то без этого никак не обойтись при масштабировании

Цитата
Евгений написал: Что бы не происходило искажения свечей при манипуляциях с графиком и включенной опцией по видимым значениям. То о чем вы говорите это если сжимать их по правой /левой вертикальной шкале мышкой.

В том то и дело, что искажение свечей в QUIK сейчас происходит в любом случае, вне зависимости от настроек. Когда двигаем мышкой вертикальную шкалу (цена), как раз изменяется коэффициент пропорции свечи. Но после изменения размеров графика кнопками "+" и "-" коэффициент пропорции меняется, и его нужно подстраивать мышкой опять. А вот зафиксировать этот коэффициент возможности нет. У tradingview для этого есть опция "Lock price to bar ratio". Если она не включена (по умолчанию не включена), то при увеличении графика пропорции свечей на графике также искажаются, как и в QUIK.

Цитата
Евгений написал: А то что свечи сжимаются по ширине то без этого никак не обойтись при масштабировании.

Если зафиксировать коэффициент, то не будут. Кстати заметил, что на tradingview и автомасштабирование работает как-то по другому, более интеллектуально вроде, до последнего пытается удерживать комфортные для восприятия глазом пропорции элементов графика и только в крайних положениях (при сильном увеличении/уменьшении) происходит размазывание/сжатие свечей.

Цитата
Евгений написал: Что бы не происходило искажения свечей при манипуляциях с графиком и включенной опцией по видимым значениям. То о чем вы говорите это если сжимать их по правой /левой вертикальной шкале мышкой.

Цитата
Евгений написал: А то что свечи сжимаются по ширине то без этого никак не обойтись при масштабировании.

Сейчас у вас есть в настройках правой и левой шкалы графика максимум и минимум, в котором определяется координаты области видимости в ценах инструмента.

Если сделать одинаковые минимумы и максимумы на графиках разных таймфреймов одного инструмента то теперь уже визуально можно определить по размерам свечей на каком графике больший таймфрейм а на каком меньший.

Нужно:
Автоматизировать этот процесс.

Сделать возможность отображение сетки инструмента одинаковым на всех графиках инструмента(одинаковые минимумы и максимумы)

То есть иметь возможность связать графики одного инструмента одинаковым масштабом ценовой сетки

Вот например графики 1 час, 15 мин, 1 мин на все графиках установлены одинаковые минимумы и максимумы для правой шкалы
(непонятно для чего еще и для левой сделана такая функция и чем она отличается)
В этом случае авто масштабирование отключается, так как сетка жестко зафиксирована и цена как видно находится на одном уровне
Вот это и есть правильная технология работы в одном масштабе ценовой сетки и так и должно быть.
То есть иметь возможность установки одинакового размера сетки для всех графиков инструмента.

Вот вариант как не должно быть, тут совсем визуально непонятно где какой таймфрейм, графики расположены точно так же 1 час, 15 ми, 1 мин

Разрешение мониторов постоянно растёт и при вёрстке веб-страниц приходится учитывать самый широкий диапазон разрешений. Это особенно важно при использовании фонового рисунка, который либо обрезается при низком разрешении монитора, либо, наоборот, целиком не помещается при высоком разрешении. Одним из решений подобной ситуации является масштабирование фона. Конечно, это сулит некоторые неприятности вроде появления искажений и артефактов в изображениях, но и расширяет арсенал средств вёрстки.

За управление размером отвечает свойство background-size , в качестве значения можно указывать ключевое слово cover , тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size . Серым цветом выделен блок размером 280х200 пикселов внутри которого устанавливается фон.

а. Исходные изображения

б. Значение cover

в. Значение contain

г. Значение 100% 100%

д. Значение 250px

Рис. 1. Вид фоновых картинок в зависимости от значения background-size

Если указано два значения размера через пробел, то первое значение определяет ширину по горизонтали, а второе по вертикали. При этом пропорции игнорируются, что хорошо заметно по рис. 1г. Вместо одного из размеров допустимо использовать ключевое слово auto , тогда браузер вычисляет его автоматически исходя из пропорций картинки.

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера. Для этого пришлось задать высоту html и body как 100%.

Пример 1. Фоновая картинка

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

К фону относится также градиент, который также можно масштабировать, тем самым получая самые разные эффекты. Например, добавив background-size к линейному градиенту, мы заставим его повторяться, что образует чередующиеся градиентные полоски (пример 2).

Пример 2. Вертикальные полосы

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Результат примера показан на рис. 2.

Рис. 2. Вертикальные градиентные полоски

Вертикальные и горизонтальные полосы можно делать не только градиентными, но и с чёткими краями. Для этого в параметрах градиента надо указать четыре цвета — от 0 до 50% цвет первой полосы и от 50% до 100% цвет второй полосы. Первый цвет с 0% и последний цвет со 100% можно не писать, они добавляется браузером автоматически, поэтому ограничимся всего двумя значениями. В примере 3 показано создание горизонтальных полос высотой 50 пикселов.

Пример 3. Горизонтальные полосы

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Горизонтальные полоски

Поскольку можно одновременно добавлять несколько фонов, перечисляя их параметры через запятую, то же самое допустимо проделать и с градиентами. Только один из цветов должен быть полупрозрачным, иначе градиенты будут перекрывать друг друга. В примере 4 для фона веб-страницы применяется два градиента, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки.

Пример 4. Два градиента

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 4.

Сочетание градиента и свойства background-size позволяет получить самые разнообразные виды фоновых заливок, созданных без применения фоновых изображений.

Чертежи на А1 ,распечатать надо на А3 . Уменьшаю блоком - шрифт размера и привязки становятся маленькими соответственно. Но они нужны в натуральную величину. Как их увеличить, не меняя все размеры вручную?

Делай текстовые и размерные стили аннотативными. Забивай помимо правильного аннотативного масштаба ещё один в 2 раза больший (это можно сделать массово. Выбрать те примитивы - тексты, размеры, выноски которые нужны в увеличенном виде и в свойствах сделать их аннотативными и добавить увеличенный масштаб). Назначай при распечатывании увеличенный масштаб аннотативности
P.S.
это для Autocad 2008 и выше

Однако, масштабировать чертеж, чтоб впихнуть его в формат, - это крайне извращенный метод работы.. Не в ту сторону смотришь, Liamana!

__________________
. Не пытайся гнуть ты ложку,
Не вяжи её узлом.
Ложка - ложка понарошку,
А по правде, - это лом!

Артиллерист - вертолётчик. Дипломированный инженер-механик. Technologist

Хотя сам по себе приницип масштабирования объектов, вместо использования масштабирования рамок или работу с видовыми экранами, уже ругали не один и даже не десять раз, но раз вы на те же грабли опять предпочитатет наступать, тогда хотя создайте новые размерный стиль с нужным масштабом

Сейчас мы решим 3 проблемы, которые рано или поздно начинают достигать начинающего веб-разработчика при попытках адаптировать сверстанный им сайт.

Проблема. Текст или другой контент начинает выезжать за пределы родительского блока при его сжатии.

Итак, первая проблема напрямую связана с неправильным указанием высоты родительских елементов страницы, в которых и находится тот контент, который начинает выезжать за пределы своего родительского блока.

Часто новички только изучая CSS начинают использовать такие свойства как height и max-height забывая о том, что при уменьшении экрана, контент, находящийся внутри блоков с такими свойствами начинает сжиматься и выходить в нижнюю часть блока (особенно это касается любого текста). Это как сжимать воздушный шар. Мы сжимаем шарик, давление внутри увеличивается и воздух давит на другие его части тем самым расширяя его в другом направлении. Тоже самое и происходит с текстом. Сжимая блок, он уменьшает пространство текста, а текст начинает уходит вниз, пробивая фиксированную высоту своего блока.

Решение. Избавьтесь от фиксированной высоты блоков при адаптации верстки! Для этого просто уберите значения height и max-height в блоках где задумывается их увеличение за счет текста внутри них. Из названий этих свойств видно, что они дают ограничения по высоте блока, а значит если текст достигнет их предела, он будет выходить за него. Не используйте значения height и max-height где нет в них никакой потребности. При адаптации вашей верстки у вас возникнут проблемы на этой почве.

Проблема. Картинка заднего фона не адаптируется под размер своего блока.

Весь нюанс заключается в том, что вы просто не дописываете нужные правила для заднего фона.

Решение. Добавить к блоку в котором стоит наш фон такую часть кода:

А теперь поясняю. Правило background-size: cover говорит браузеру, что размер картинки фона нужно наложить на всю площадь ее родителя при этом пропорционально растягивая её. Этим правилом мы фиксим проблему с ненужным для нас дублированием картинки фона, что превращает весь фон в страшную матрицу картинок при неестественном изменении размера родителя.

Строка кода background-position: center, в свою очередь, размещает картинку фона по центру своего родителя. Здесь ничего объяснять не нужно, это и так довольно легко для понимания.

ВАЖНО! Если вы таким способом делаете фон для какой либо секции или блока на сайте, который априори имеет больший размер картинки своего фона, эта картинка будет иметь ухудшенное разрешение. Это связано с тем, что те свойства, которые мы прописываем к фону заставляют картинку изменять свой размер пропорционально размеру своего родительского блока. Вообщем, просто запомните, что не стоит ставить картинку, например 800×600 фоном для блока размером 1920×1080. Люди увидевшие это будут лишены всяческого чувства сострадания по отношению к вам, когда вас встретят в 10 часов вечера на улице возле вашего дома с ломом в руках.

Как убрать горизонтальную прокрутку?

Проблема. На меньших экранах сайта появляется горизонтальная прокрутка хотя все елементы адаптированы исправно и не вылазят за пределы своих блоков.

Такая проблема может довольно часто появляться даже у опытных верстальщиков. Особенность этой проблемы в том, что иногда совершенно не понятно в чем кроется проблема появления прокрутки. Ты вроде поубирал ненужные марджины, правильно настроил ширину блоков относительно всей страницы, но злополучный скролл все не исчезает.

Решение. Необходимо добавить селектору body свойство overflow-x: hidden. В коде это выглядит так:

После этого, горизонтальная прокрутка будет отключена на всей странице сайта. Однако, учтите, что это свойство не воспринимают некоторые стандартные мобильные браузеры, в особенности, браузер Safari на IOS устройствах.

Читайте также: