Масштабирование фона


Содержание

Масштабируемый фон

Задача

Сделать масштабируемый фон без использования flash.

Почему для этой задачи часто применяется flash

Flash cнабжен возможностями соблюдения пропорций изображения при масштабировании.

В HTML и CSS такое сделать тоже просто, но не так очевидно.

Решение

Т.к. background-size пока не всеми распространенными браузерами поддерживается, приходится это свойство воспроизводить в ручную:

Прием основан на понятии из CSS спецификаций replaced element. На такие элементы распространяются особые правила расчета размеров. Для нашего случая действует следующие: если для элемента указан только один размер, второй рассчитывается автоматически с соблюдением пропорций.

Недостатки

  • снижается производительность браузера (у flash с этим тоже не все хорошо, а скорей всего даже хуже);
  • чтобы не терялось качество при больших разрешениях экрана (не забываем, что изображение растровое), картинку нужно использовать с максимальными размерами. А такие картинки могут весить очень много (например, в демонстрационном примере фоновая картинка весит более 500Kb).

Почему не SVG

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

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

А если не для body

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

Хочу на всю область страницы

Если следует растянуть фон на всю страницу, тогда добавляем height: 100%. Но тогда пропорции изображения сохраняться не будут.

Вывод

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

масштабирование фоновой картинки

19.03.2010, 18:51

Пробелы в имени фоновой картинки
Друзья, есть у меня динамическая страничка на которой размещены фотографии, которые загрузил.

Задать прозрачность фоновой картинки
background-image:url(‘../images/g.png’) ; Нужно добавить параметр прозрачность 0.2 (только для.

Создание фоновой картинки средствами HTML
Народ здравствуйте. Сдавал контрольную работу преподу и он спросил почему я фоновую картинку.

Цвет для фоновой картинки (png)
Здравствуйте. У меня есть иконка крестика (close; «X» — только пересечение прямое) для модального.


Масштабирование фона css. Управление размером фонового изображения при помощи css

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

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

  • заполнить всю страницу одним изображением без пробелов;
  • изменение размеров картинки при необходимости (уменьшении окна браузера);
  • сохранение пропорций изображения;
  • расположение изображения в центре страницы;
  • отсутствие полос прокрутки на странице;
  • кросс-браузерное решение, подходящее для разных браузеров;
  • реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

Решение поддерживают почти все популярные в сети:

  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
  • Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
  • Chrome Whatever+
  • IE 9+
  • Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter : prog ) ; -ms-filter: «prog ;

Но внимание. при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

Илон Маск рекомендует:  Iis разрешение включений на стороне сервера
img.bg < /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; >@media screen and (max-width : 1024px ) < /* Specific to this particular image */ img.bg < left : 50% ; margin-left : -512px ; /* 50% */ >>

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

  • IE 9 — работает;
  • IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
  • IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg < position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; >#bg img
  • Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
  • IE 8+
  • Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только w >

Доступ ко всем данным идет через JavaScript, коды используются следующие:

Масштабирование фонового изображения css в зависимости от размера окна


CSS свойство, которое отвечает за масштабирование изображений, называется background-size. Данное свойство хорошо тем, что мы можем самостоятельно задавать нужный нам размер изображения, и можем использовать уже встроенные значения свойства. Начнем разбирать, какие значения мы можем использовать. Первое — это самостоятельно задавать размер изображения. Можно задавать различные единицы измерения, а какие — на Ваше усмотрение. Важно помнить, что при этом мы указываем два параметра без запятой, первый отвечает за ширину изображения, второй за высоту изображения. Если установить одно значение, то второе будет подобрано автоматически, с сохранением пропорций изображения. Осталось разобрать только значения, которые встроены в свойство background-size. Значение cover, означает, что изображение будет масштабировано таким образом, что его ширина и высота, будут равны ширине и высоте блока, в котором оно находится. Второе значение contain, означает, что изображение будет масштабировано в блоке с сохранением пропорций, которые браузер подберет самостоятельно.

background-size: [ | | auto ] <1,2>| cover | contain

Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.

Задает размер фоновой картинки в процентах от ширины или высоты элемента.

auto

Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

cover

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

contain

Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Масштабирование фона.

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

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

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

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

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

Адаптивные фоновые изображения

Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

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

Фиксированное соотношение сторон

Данный трюк заключается в установке значения в процентах отступам (padding) элемента. Впервые способ опубликован в старой статье блога A List Apart, однако он до сих пор хорошо работает.

Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон — 16:9. В коде ниже для отступов используется px, но все будет работать и с em. Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv.

Добавляем фон

Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover. К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position. Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.

Резиновое соотношение сторон

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

Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top:

На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top, начальная высота (start height) — атрибуту height. В итоге получается код:

Использование SCSS для расчета


Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS. Пример этого:

QuickTUTS.ru — УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

| 8 Авг 2012 | Оставить комментарий

CSS: Создание масштабируемого фона для сайта

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

Итак, нам нужно большое изображение, которое будем использовать в качестве фона. Я использовал это.

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

Как Вы поняли, главное свойство — это background-size , которое появилось в CSS3 и задает размер фонового изображения. Помимо значений в пикселях и процентах оно может принимать значения:

auto — Если задано одновременно для ширины и высоты ( auto auto ), размеры фона остаются исходными; если только для одной стороны картинки (100px auto ), то размер вычисляется автоматически исходя из пропорций картинки.

cover — Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain — Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Адаптивное целое фоновое изображение с помощью CSS

Дата публикации: 2014-07-31

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

Примеры адаптивных целых фоновых изображений

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Если вы хотели бы добиться похожего результата в вашем следующем веб-проекте, тогда эта статья – это то, что вам нужно.

Базовые принципы

Вот наш план действий.

Используйте свойство background-size, чтобы полностью заполнить окно просмотра

CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.

Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств

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

Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.

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

Адаптивные фоновые изображения. Масштабирование фона

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

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


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

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

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

Растяжка и масштаб CSS-фона

Есть ли способ получить фон в CSS для растягивания или масштабирования, чтобы заполнить его контейнер?

Для современных браузеров вы можете выполнить это, используя background-size :

cover означает растягивание изображения по вертикали или по горизонтали, чтобы он никогда не повторялся/повторялся.

Это будет работать для Safari 3 (или более поздней версии), Chrome, Opera 10+, Firefox 3.6+ и Internet Explorer 9 (или более поздней).

Чтобы он работал с более низкими версиями Internet Explorer, попробуйте эти CSS:

Используйте свойство CSS 3 background-size :

Это доступно для современных браузеров с 2012 года.

Масштабирование изображения с помощью CSS не совсем возможно, но аналогичный эффект может быть достигнут следующим образом.

Используйте эту разметку:

со следующим CSS:

и вы должны быть готовы!

Чтобы масштабировать изображение до «полного истечения» и поддерживать соотношение сторон, вы можете сделать это вместо:

Это хорошо работает! Однако, если одно измерение обрезается, оно будет обрезано только на одной стороне изображения, а не равномерно обрезано с обеих сторон (и центрировано). Я тестировал его в Firefox, Webkit и Internet Explorer 8.

EDIT: Modernizr поддерживает обнаружение поддержки размера фона. Вы можете использовать обходное решение JavaScript, написанное для работы, но оно вам нужно и загружать его динамически, когда нет поддержки. Это сохранит код, поддерживаемый, не прибегая к интрузивным CSS-хакам для определенных браузеров.

Лично я использую script для работы с ним, используя jQuery, его адаптацию imgsizer. Поскольку большинство проектов, которые я сейчас использую, используют ширину% для макетов жидкостей на разных устройствах, есть небольшая адаптация к одному из циклов (учет размеров не всегда 100%):

EDIT: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e.

Попробуйте статью background-size. Если вы используете все следующие, он будет работать в большинстве браузеров, кроме Internet Explorer.

В настоящее время нет. Он будет доступен в CSS 3, но это займет некоторое время, пока оно не будет реализовано в большинстве браузеров.

  • Safari 3+
  • Chrome Whatever +
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает размер фона, но не ключевые слова)
  • Firefox 3.6+ (Firefox 4 поддерживает версию с префиксом, отличную от поставщика)

Кроме того, вы можете попробовать это для решения ie

Одним словом: нет. Единственный способ растянуть изображение — это тег . Вы должны быть творческими.

Это было правдой в 2008 году, когда был написан ответ. Сегодня современные браузеры поддерживают background-size , который решает эту проблему. Помните, что IE8 не поддерживает его.

Определите «растягивание и масштабирование».

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

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

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

Что касается того, что изображение действительно сжимается и растет с контейнером, вам нужно будет использовать некоторые фокальные трюки, чтобы изображение выглядело как фон и некоторый javascript, чтобы изменить его размер с помощью контейнера. Нет никакого способа сделать это с помощью CSS.

Если вы используете векторную графику, вы, конечно, вне моей компетенции.

Илон Маск рекомендует:  Что такое код imap_thread
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL