Масштабирование фона. Абсолютное изменение размера

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров - взгляните на демонстрационную страницу background-size .

Абсолютное изменение размера

Могут применяться единицы измерения.

Background-size: ширина высота;

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Background-size: 100px 200px;

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

Background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Background-size: contain;

Заполнение фоном

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

Background-size: cover;

Масштабирование нескольких фонов

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

Background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

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

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

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

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

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера.

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

Результат данного примера показан на рис. 2. При изменении размеров окна фотография будет увеличиваться или уменьшаться, чтобы полностью заполнить всю веб-страницу.

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

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

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

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

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

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

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

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

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

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

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

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

HTML

Для разметки потребуется только это:

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

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

CSS

Задаем следующие стили для элемента body:

body { /* Путь до изображения */ background-image: url(images/background-photo.jpg); /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ background-position: center center; /* Фоновое изображение не повторяется */ background-repeat: no-repeat; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ background-attachment: fixed; /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background-size: cover; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background-color: #464646; }

body { /* Путь до изображения */ background - image : url (images / background - photo . jpg ) ; /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ /* Фоновое изображение не повторяется */ background - repeat : no - repeat ; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background - size : cover ; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background - color : #464646;

Наиболее важная пара свойство/значение, на которую следует обратить внимание:

background-size: cover;

background - size : cover ;

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

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

Увеличение размера изображения относительно исходных размеров сказывается на качестве изображения. Помните об этом, когда будете выбирать подходящее изображение. В демо-примере используется огромная фотография размером 5500x3600px для широкоформатных мониторов, поэтому потребуется очень большой экран, чтобы произошло искажение качества. Давайте двигаться дальше. Чтобы фоновое изображение всегда было по центру окна просмотра, мы пропишем:

background-position: center center;

background - position : center center ;

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

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

background-attachment: fixed;

background - attachment : fixed ;

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

Сокращенная запись CSS

Я подробно расписал фоновые свойства, чтобы их было легче объяснить. Равнозначной будет и сокращенная запись:

body { background: url(background-photo.jpg) center center cover no-repeat fixed; }

body { background : url (background - photo . jpg ) center center cover no - repeat fixed ;

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

Дополнительно: медиа-запрос для маленьких экранов

Для маленьких экранов я использовал программу Photoshop, чтобы пропорционально уменьшить исходное фоновое изображение до размера 768x505px, а также я воспользовался сервисом Smush.it для того, чтобы еще немного уменьшить размер. Благодаря этому размер файла уменьшился с 1741KB до 114KB. Т.е. размер изображения уменьшился на 93%.

Пожалуйста, не поймите меня неправильно, 114KB это все еще довольно много для чисто эстетического элемента дизайна. Учитывая дополнительную нагрузку в 114KB, я бы стал использовать такой файл, только если бы увидел возможность значительно улучшить опыт взаимодействия пользователя с сайтом (UX), т.к. в настоящий момент значительная доля Интернет трафика приходится на работу мобильных устройств background - image : url (images / background - photo - mobile - devices . jpg ) ;

У медиа-запроса установлено ограничение по ширине max-width: 767px, которое означает, что если окно просмотра браузера больше 767px, то будет загружаться большое фоновое изображение.

Недостаток использования данного медиа-запроса заключается в том, что если вы измените ширину окна вашего браузера, например, с 1200px до 640px (или наоборот), вы сразу же увидите момент загрузки маленького или большого фонового изображения.

Вдобавок к этому, из-за того, что некоторые устройства с маленьким экраном могут отображать большее количество пикселей – например, iPhone 5 c дисплеем retina способен отобразить разрешение 1136x640px – маленькое фоновое изображение будет пикселизовано.

Подводя итог

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

Визуально я могу оценить разницу, но в каких ситуациях я должен отдать предпочтение одному другому? Есть ли смысл использовать их вообще или их можно заменить процентами?

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

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

Значения имеют следующие значения:

"содержит

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

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

Я, вероятно, немного толстый, но может ли кто-нибудь дать мне простое объяснение на английском языке с относительными примерами?

6 ответов

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

Примечание: Aspect ratio = width / height

Содержит

if (aspect ratio of container > aspect ratio of image) image-height = container height image-width = aspect-ratio-preserved width else image-width = container width image-height = aspect-ratio-preserved height

Обложка

if (aspect ratio of container > aspect ratio of image) image-width = container width image-height = aspect-ratio-preserved height else image-height = container height image-width = aspect-ratio-preserved width

Вы видите отношение? В обоих случаях cover и contain соотношение сторон сохраняется. Но условия if - else обращаются в обоих случаях.

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

Q. Могут ли они быть заменены процентами?

Нет, не просто по процентам. Вам потребуется кондиционирование.

Q. В каких ситуациях я должен выбирать один за другим?

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

contain , с другой стороны, можно использовать, когда вы используете повторяющийся фон (например, когда у вас есть образ изображения с очень высоким коэффициентом пропорции по veiwport/container, вы можете использовать contain и установите background-repeat в repeat-y). Но более подходящее использование для contain будет для фиксированного элемента height/width.

Несмотря на то, что вопрос предполагает, что читатель уже понимает, как работают contain и cover значения для background-size , вот простой англоязычный перефразирование того, что говорит спецификация, которая может служить в качестве быстрого праймера:

background-size: contain гарантирует, что все фоновое изображение будет соответствовать фоновой области, сохраняя исходное соотношение сторон. Если область фона меньше, чем изображение, изображение будет уменьшаться, так что оно может соответствовать области фона. Если область фона выше или выше изображения, то любые части области, не занятые основным изображением, будут заполняться повторами изображения или почтовых ящиков /whitespace, если для параметра background-repeat установлено значение no-repeat .

background-size: cover делает фоновое изображение настолько большим, насколько возможно, чтобы оно заполнило всю область фона, не оставляя пробелов. Разница между cover и 100% 100% заключается в том, что соотношение сторон изображения сохраняется, поэтому не происходит неестественного растяжения изображения.

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

Итак, когда вы используете один над другим? Лично я считаю, что cover имеет более практическое применение, чем contain , поэтому я пойду первым. 1

размер фона: обложка

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

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

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

Html { height: 100%; background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } body { width: 80%; min-height: 100%; background-color: rgba(255, 255, 255, 0.5); margin: 5em auto; padding: 1em; }

Если вы используете background-size: contain , вместо этого происходит то, что фоновое изображение сжимается, чтобы все изображение соответствовало области предварительного просмотра. Это оставляет уродливые белые почтовые ящики вокруг изображения в зависимости от соотношения сторон панели предварительного просмотра , что разрушает эффект.

background-size: содержать

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

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

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

Но это не обязательно должно применяться к изображению неправильной формы. Он также может применяться к прямоугольным изображениям. Пока вы требуете, чтобы не было обрезки фонового изображения, пробел можно рассматривать как разумный компромисс или вообще не иметь большого значения. Помните макеты фиксированной ширины? Подумайте о background-size: contain , по существу, о том, что, но для фоновых изображений и в портретной и ландшафтной ориентации: если вы можете гарантировать, что контент всегда будет соответствовать границам фонового изображения в любое время, тогда пробелы становятся вообще не относящимися к проблеме.

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи .

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Есть несколько способов определения размеров - .

Абсолютное изменение размера

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

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Заполнение фоном

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

: cover;

Масштабирование нескольких фонов

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

background : url ("sheep.png" ) 60% 90% no-repeat , url ("sheep.png" ) 40% 50% no-repeat , url ("sheep.png" ) 10% 20% no-repeat #393 ; : 240px 210px , auto , 150px ;

Все последние версии браузеров поддерживают свойство background-size.

Заключение

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

Не забудьте подписаться на обновления блога , чтобы не пропустить новые интересные статьи.