Масштабирование фона
Разрешение мониторов постоянно растёт и при вёрстке веб-страниц приходится учитывать самый широкий диапазон разрешений. Это особенно важно при использовании фонового рисунка, который либо обрезается при низком разрешении монитора, либо, наоборот, целиком не помещается при высоком разрешении. Одним из решений подобной ситуации является масштабирование фона. Конечно, это сулит некоторые неприятности вроде появления искажений и артефактов в изображениях, но и расширяет арсенал средств вёрстки.
За управление размером отвечает свойство 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
Градиент body Результат примера показан на рис. 2.
Рис. 2. Вертикальные градиентные полоски
Вертикальные и горизонтальные полосы можно делать не только градиентными, но и с чёткими краями. Для этого в параметрах градиента надо указать четыре цвета — от 0 до 50% цвет первой полосы и от 50% до 100% цвет второй полосы. Первый цвет с 0% и последний цвет со 100% можно не писать, они добавляется браузером автоматически, поэтому ограничимся всего двумя значениями. В примере 3 показано создание горизонтальных полос высотой 50 пикселов.
Пример 3. Горизонтальные полосы
HTML5 CSS3 IE 10+ Cr Op Sa Fx
Градиент body Результат данного примера показан на рис. 3.
Рис. 3. Горизонтальные полоски
Поскольку можно одновременно добавлять несколько фонов, перечисляя их параметры через запятую, то же самое допустимо проделать и с градиентами. Только один из цветов должен быть полупрозрачным, иначе градиенты будут перекрывать друг друга. В примере 4 для фона веб-страницы применяется два градиента, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки.
Пример 4. Два градиента
HTML5 CSS3 IE Cr Op Sa Fx
Градиент body Результат данного примера показан на рис. 4.
Сочетание градиента и свойства background-size позволяет получить самые разнообразные виды фоновых заливок, созданных без применения фоновых изображений.
Как изменить масштаб html страницы?
Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы уменьшится с сохранением ширины документа. Это важный момент, т. к. решения, которые я находил в интернете уменьшали масштаб и в том числе сужали страницу по ширине. Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).
Отслеживать
32.1k 19 19 золотых знаков 79 79 серебряных знаков 106 106 бронзовых знаков
задан 11 июн 2015 в 13:24
user179410 user179410
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Это функция браузера, которая не описана в стандартах. Браузеры вольны реализовывать масштабирование так, как захочется левой пятке архитектора браузера, а также учитывать предпочтения юзера в настройках.
Так как «уникальные» для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.
Масштабирование может быть реализовано самим сайтом с помощью возможностей CSS.
Правильный способ
Использовать относительные размеры для шрифтов ( % , em и др.), в корне страницы менять размер базового шрифта.
Для остальных элементов можно добавить дополнительные стили и опять же в зависимости от класса корня менять размер. Для картинок будет разумно округлять масштаб до «круглых» чисел вроде 50%, 33% и т. п.
Жёсткий способ
Использовать стандартное свойство CSS transform . Можно добавить в корень документа стиль transform: scale(N%) , тогда отмасштабируется вся страница. Учтите, что за качество и производительность никто не отвечает.
Чтобы сохранить ширину страницы, её можно менять в соответствии с масштабом (помножить на обратное число, собственно).
Костыльный способ
Ипользовать нестандартное свойство CSS zoom . Опять же в корень можно добавить zoom: N% . Поддержка не гарантируется, работает не во всех браузерах.
Пример правильного способа:
$(function() < var fontSize = 12; var imgScales = < small: 0.25, normal: 0.50, large: 1.00 >function setFontSize(fontSize) < var zoomLevel = 'normal'; if (fontSize = 15) zoomLevel = 'large'; var imgScale = imgScales[zoomLevel]; $('#root').css('font-size', fontSize + 'pt'); $('#root').removeClass('zoom-small zoom-normal zoom-large'); $('#root').addClass('zoom-' + zoomLevel); $('img.scalable').each(function() < $(this).css('width', this.naturalWidth * imgScale); $(this).css('height', this.naturalHeight * imgScale); >); > $('#plus').on('click', function() < setFontSize(++fontSize); >); $('#minus').on('click', function() < setFontSize(--fontSize); >); >);#root < font: 12pt sans-serif; width: 500px; background: lightskyblue; >p < font-size: 1em; >h1
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
zoom
Изменяет масштаб объекта согласно заданному значению.
Синтаксис
Значения
значение Число с плавающей запятой, значение 1.0 соответствует normal . Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. проценты Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal . normal Объект имеет исходный масштаб.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
zoom .zoom:hover 
В данном примере масштаб рисунка увеличивается в три раза при наведении на него курсора мыши.
Объектная модель
[window.]document.getElementById(» elementID «).style.zoom
Браузеры
Браузер Internet Explorer с версии 8.0 понимает также свойство — ms-zoom .
Функция scale()
С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:
transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */ transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */
В начале темы, когда мы рассказывали о свойстве transform в целом, упоминалось, что трансформированные элементы могут накладываться на соседние. Наиболее наглядно показать это позволяет именно функция scale().
Параметры функции
В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.
Для более произвольного масштабирования можно указать два параметра — для горизонтали и вертикали соответственно. Например, следующий код увеличит масштаб элемента в четыре раза по горизонтали и в полтора раза по вертикали:
transform: scale(4, 1.5);
Отдельные функции для каждой оси
В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:
- scaleX() — масштабирование по горизонтали X;
- scaleY() — масштабирование по вертикали Y;
- scaleZ() — масштабирование по оси Z.
В качестве параметра принимаются те же числа, что и для основной функции.
Отрицательные числа в параметрах
Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):
transform: scale(1, -1); /* флип по оси X */ transform: scale(-1, 1); /* флип по оси Y */ transform: scale(-1); /* флип по осям X и Y */
При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.
Далее в учебнике: функция наклона skew().