size | HTML и CSS с примерами кода
Свойство background-size масштабирует фоновое изображение, согласно заданным размерам.
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис
/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Global values */ background-size: inherit; background-size: initial; background-size: unset;
Значения
<размер>- Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>- Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Значение по-умолчанию:
background-size: auto;
Применяется ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 3
Поддержка браузерами
Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.
com.
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>background-size</title>
<style>
div {
height: 200px; /* Высота блока */
border: 2px solid #000; /* Параметры рамки */
background: url('/example/image/mybg.png') 100% 100%
no-repeat; /* Добавляем фон */
background-size: cover; /* Масштабируем фон */
}
</style>
</head>
<body>
<div>...</div>
</body>
</html>
масштабируем фон — учебник CSS
Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.
Значения background-size
Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS.
В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).
Ключевые слова
auto(значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:background-size: auto auto;
…то размеры фона останутся оригинальными. Если значение
autoзадано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:background-size: 250px auto;
…то высота фоновой картинки будет вычисляться автоматически.
contain— фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.cover— фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.
Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.Числовые значения
Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.
Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:
background-size: 300px 300px;
Учтите, что изображение может исказиться, если вы не попадете в его пропорции:
Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:
Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически
Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.
Поддержка браузерами
Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.
Далее в учебнике:
пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.Стиль HTML DOM backgroundSize Свойство
❮ Назад ❮ Справочник по объектам стиля Далее ❯
Пример
Укажите размер фонового изображения:
document.getElementById(«myDIV»).style.backgroundSize = «60px 120px»;
Попробуйте сами »
Определение и использование
Свойство backgroundSize устанавливает или возвращает размер фоновых изображений.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Собственность | |||||
|---|---|---|---|---|---|
| размер фона | 4,0 | 9,0 | 4,0 | 4. 1 | 10,5 |
Синтаксис
Вернуть свойство backgroundSize:
объект .style.backgroundSize
Установить свойство backgroundSize:
| object .style0061 длина |обложка|содержать|начальный|наследовать»
Значения свойств
| Значение | Описание |
|---|---|
| авто | Значение по умолчанию. Фоновое изображение содержит ширину и высоту | .
| длина | Задает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, второе устанавливается на «авто» |
| проценты | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто» | .
| крышка | Масштабируйте фоновое изображение как можно больше, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в области позиционирования фона |
| содержат | Масштабируйте изображение до максимального размера, чтобы его ширина и высота могли поместиться в области содержимого |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Технические детали
| Значение по умолчанию: | авто |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство background-size элемента |
| Версия CSS | CSS3 |
Связанные страницы
Ссылка CSS: свойство background-size
❮ Предыдущая ❮ Справочник по объектам стиля Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
| О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
Как кодировать плавную высоту для фоновых изображений и видео с помощью только CSS
Удобство для мобильных устройств часто является главной задачей современных веб-сайтов. Мобильный просмотр веб-страниц официально обгоняет просмотр с рабочего стола. Фирма StatCounter, занимающаяся веб-аналитикой, сообщает, что 51,3 % просмотров веб-страниц в мире происходит на мобильных устройствах и планшетах по сравнению с 48,7 % на настольных компьютерах (ноябрь 2016 г.). Тогда вполне вероятно, что мобильные пользователи представляют большую часть целевой аудитории во всем мире, поэтому отказ от обращения к мобильным пользователям означает потерю значительной доли рынка. Поскольку изображения и видео также популярны среди мобильных пользователей, убедитесь, что ваши фоновые изображения и видео оптимизированы для мобильных устройств с помощью плавной высоты только с помощью CSS.
51,3% глобального просмотра происходит на мобильных устройствах и планшетах по сравнению с 48,7% на настольных компьютерах.
StatCounter, ноябрь 2016 г., через The Guardian
Зачем вам быть мобильными
С самого начала мобильные сайты имеют маркетинговое преимущество. Веб-сайты, которые не оптимизированы для мобильных устройств, просто не получают такой же информации от поисковых систем. В результате эти сайты сталкиваются с потерей потенциальных клиентов и маркетинговых возможностей, а также с менее чем звездным имиджем бренда. И наоборот, сайты, оптимизированные для мобильных устройств, вознаграждаются. Технология Google, Accelerated Mobile Platform или AMP, повышает рейтинг мобильных веб-сайтов в своих алгоритмах (цитата из Associations Now, март 2016 г.).
Наконец, бренд компании страдает, если сайт плохо работает. Тем не менее, для пользователей плохой опыт часто неудобен для мобильных устройств.
Согласно инфографике, опубликованной Yahoo! Advertising Solutions, 48% пользователей говорят, что их раздражают веб-сайты, которые не оптимизированы для использования на мобильных устройствах. Кроме того, 48% пользователей считают, что если мобильный сайт не работает должным образом, то это не должно волновать организацию (март 2013 г.). Маркетинговая фирма McKinsey & Company добавляет: «По данным Google, 61% пользователей вряд ли вернутся на мобильный сайт, с которым у них возникли проблемы, а 40% вместо этого посещают сайт конкурента» (январь 2014 г.).
Как сделать сайт удобным для мобильных устройств
Чтобы обеспечить удобство для мобильных устройств, внедрите гибкий и адаптивный веб-дизайн. (В чем разница между гибкими, адаптивными и другими методами макетирования веб-дизайна? Объясняется в разделе «Сравнение макетов веб-дизайна: статический, адаптивный, гибкий, адаптивный и ориентированный на мобильные устройства».)
Ширина и высота содержимого должны быть уделяется внимание в веб-дизайне, чтобы оказать максимальное влияние на зрителей и четко передать информацию.
Почему создание гибкой высоты для мобильных устройств может быть затруднено
К сожалению, хотя легко установить плавную ширину, плавная высота сложнее.
Парсеры в веб-браузерах, которые «читают» код и создают веб-страницу, действуют как западные читатели. Веб-парсеры начинают с верхнего левого угла экрана, продвигаются вправо и, наконец, вниз. Они размещают элементы веб-страницы именно в таком порядке. При таком анализе они могут быстро определить ширину объекта.
С другой стороны, высота не может быть определена, пока не будет размещен последний элемент. Если высота предопределена разработчиком и зафиксирована в коде, контент не сможет адаптироваться к размерам области просмотра. Это может привести к нежелательной обрезке и раздражающим полосам прокрутки. Если разработчик попытается установить относительную высоту, используя проценты или ems, содержимое может вообще не отображаться. В противном случае он также мог бы появиться в размере, который меньше полезного.
Тем не менее, некоторый контент требует плавной высоты. Элементы Div со встроенными фреймами (IFrames) или фоновыми изображениями могут обрезать содержимое при просмотре на небольших экранах просмотра. В результате отображается крошечное видео, за которым следует зияющее пустое пространство, прежде чем возобновится остальной контент. С другой стороны, видео может отображать только заголовок, потому что нижняя часть обрезана. Фоновые изображения могут столкнуться с аналогичными препятствиями. Во многих случаях изображения находятся на переднем плане дизайна и выглядят просто как изображения. Тем не менее, иногда изображения помещаются на задний план. Веб-разработчики могут использовать фоновые изображения для добавления масштабирования, анимации, параллакса или других эффектов. Это может помочь проиллюстрировать концепции и предоставить больше информации. Решение для плавной высоты сохранит исходное соотношение сторон, чтобы предотвратить кадрирование.
Решение для мобильных устройств Fluid Heights, основанное только на CSS
Не бойтесь! МОЖНО создавать плавные высоты — просто не устанавливая высоты.