size — свойство css :: руководство cssdot.ru
Свойство background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Так как для элемента может быть указанно несколько фоновых картинок, то и с помощью данного свойства можно указать размеры для нескольких картинок — они последовательно перечисляются через запятую. Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.
Допустимые значения
length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т.д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.
percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.- auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту.
- cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
- contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.
Примечания
Это свойство описанно в CSS3 модуле CSS Backgrounds and Borders Module Level 3.
Примеры использования
Свойство background-size определено в спецификации CSS 3 модуль Backgrounds and Borders Level 3 (фон и рамки, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.
Смотри также:
- -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
- -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
- -webkit-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
- Спецификация стандарта CSS 3
- Описание на Mozilla Developer Network
- Описание на Microsoft Developer Network
- Описание на Safari Developer Library
Краткое описание
Размер фонового изображения, или его масштаб относительно элемента-контейнера.
Синтаксис:
[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*
По умолчанию:
auto
Применяется к:
всем элементам
Наследование:
не наследуетсяТип носителя:
визуальные
Объектная модель документа (DOM):
[элемент].style.backgroundSize
Кроссбраузерная совместимость
Internet Explorer
| 5 | 5.5 | 6 | 7 | 8 | 9 | 10a |
|---|---|---|---|---|---|---|
| — | — | — | — | — | + | + |
Firefox
| 2.0 | 3.0 | 3.5 | 3.6 | 4.0 | 5.0 | 6.0 | 7.0 | 8.0 | 9.0 | 10.0 | 11.0 | 12.0 | 13.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| — | — | — | — | + | + | + | + | + | + | + | + | + | + |
Chrome
1. 0 | 2.0 | 3.0 | 4.1 | 5.0 | 6.0 | 7.0 | 8.0 | 9.0 | 10.0 | 11.0 | 12.0 | 13.0 | 14.0 | 15.0 | 16.0 | 17.0 | 18.0 | 19.0 | 20.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| — | — | — | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + |
Safari
| 1.0 | 1.1 | 1.2 | 1.3 | 2.0 | 3.0 | 3.2 | 4.0 | 5.0 |
|---|---|---|---|---|---|---|---|---|
| — | — | — | — | — | — | — | — | + |
Opera
| 8.5 | 9.2 | 9.5 | 9.6 | 10.1 | 10.5 | 10.6 | 11.0 | 11.1 | 11.5 | 11.6 |
|---|---|---|---|---|---|---|---|---|---|---|
| — | — | — | — | — | + | + | + | + | + |
тег HTML img против фонового изображения CSS | by Mahesh Konne
Тег HTML img против фонового изображения CSS | Махеш Конне | Medium Чтение через 2 минуты·
31 июля 2021 г.
Фото Флориана Оливо на Unsplash В нашей повседневной жизни, когда мы создаем компонент пользовательского интерфейса или HTML-шаблон, мы должны были столкнуться с этим сценарием, чтобы выбрать между тегом HTML и свойством CSS
background-image .
Я тоже столкнулся с этой ситуацией и провел небольшое исследование. Вот несколько важных моментов, которые следует учитывать перед тем, как сделать выбор.
- Доступность — В случае
background-imageПрограммы чтения с экрана не сообщают о своем присутствии и, следовательно, ничего не сообщают своим пользователям, но они могут читать атрибут html изображенияalt. - Производительность — я пробовал оба способа, используя изображения разного размера. Производительность почти одинакова при использовании обоих.
- Печать HTML-страницы — Браузеры не всегда настроены на печать фоновых изображений по умолчанию. Если вы хотите, чтобы изображение печаталось (cmd/ctrl + p) по умолчанию, используйте
background-image - SEO — Поисковые системы не могут видеть изображения, они могут искать только атрибут
altна изображениях. Таким образом, тег изображения с атрибутомaltпомогает нам в SEO. - Манипуляции с изображением — Если у вас есть спрайт изображения или слоев изображения и вы хотите отображать их при наведении курсора мыши или , если вы хотите, чтобы текст поверх изображения легко или если вы хотите показать только некоторую часть изображения или , если вы хотите применить некоторые классные свойства
background-attachment..background-image— это вариант. - Базовый Защита изображения — Если вы хотите защитить свое изображение от людей, которые не знают опцию проверки элемента, вы можете выбрать
background-image - Призыв к действию — Если вы хотите свое изображение чтобы быть интерактивным, HTML-тег изображения должен быть опцией.
Если вы хотите, чтобы изображение печаталось (cmd/ctrl + p) по умолчанию, используйте 
Помимо приведенных выше соображений, если изображение является частью контента, например логотипом, диаграммой или человеком (реальным человеком, а не людьми со стоковых фотографий), используйте тег с атрибутом
alt . Для всех других вариантов использования используйте фоновое изображение.
Ссылка: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
Веб-разработка
Написано Махешем Конне
3 подписчика 9000 3
JS ❤️’er
Еще от Махеша Конне
Махеша Конне
Почему мы никогда (ну, редко) используем «new Array()» в JavaScript?
Когда я играл с массивами JavaScript, у меня были странные результаты с конструктором массива. Давайте посмотрим на это глубоко.
Чтение через 2 минуты · 13 июля 2021 г.
Махеш Конне
Эффективный способ решения Promise Concurrency в JavaScript
Как веб-разработчик, я иногда сталкивался с ситуациями, когда мне нужно было выполнять одновременные вызовы API, и я выбирал решение Promise.
all()2 минуты чтения·23 января
Просмотреть все от Махеша Конне
Рекомендовано от Medium
Digital Republic ⭐
9 проектов, которые помогут вам стать экспертом по фронтенду в 2023 г.
·Чтение через 10 мин·3 февраляThe PyCoach
в
Искусственный угол
Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT
Освоить ChatGPT, изучив технологию быстрого доступа.
·7 минут чтения·17 мартаСписки
Истории, которые помогут вам расти как разработчику программного обеспечения
19 историй·45 сохранений
Подборка персонала
310 историй·77 сохранений
Михал Малевич
Там ПЯТЬ уровней навыков пользовательского интерфейса.
Только уровень 4+ позволяет нанять вас.
·6 минут чтения·25 апреляАбхинав Кумар
Использовали ли вы :is(), функцию псевдокласса CSS
:is() сделать CSS проще и чище
9000 3 ·2 мин read·Jan 22David Dal Busco
in
Geek Culture
Sass media query mixins
Sass media query mixin, чтобы избежать дублирования контрольных точек CSS повсюду.
