Css размер фонового изображения: Как изменить размер фонового изображения с помощью CSS3

18.02.2021 Разное

Содержание

масштабируем фон — учебник 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.

background-size | WebReference

Масштабирует фоновое изображение, согласно заданным размерам.

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

background-size: <bg-size> [, <bg-size> ]*

<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

<размер>: Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>: Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto: Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain: Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Песочница

auto auto 100% 100% auto 100% 100% cover contain

div {
  background-size: {{ playgroundValue }};
}

Пример

<!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>

Объектная модель

Объект.style.backgroundSize

Примечание

Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.

Opera до версии 10.53 использует свойство -o-background-size.

Firefox до версии 4 использует свойство -moz-background-size.

Opera 9.5 некорректно устанавливает положение фиксированного фона.

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


9	12	1	3	9	10.53	3	4.1	3.6	4


2.3	1	4	11	5.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Цвет и фон

См. также

background
background-attachment
background-clip
background-image
background-origin
background-position
background-repeat
Масштабирование фона
Несколько фоновых картинок
Установка фона и градиента

Рецепты

Как сделать фоновую картинку на всю ширину?

Практика

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

Фоновое изображение CSS — уменьшить до фиксированного размера div

спросил 6 лет, 5 месяцев назад

Изменено 11 месяцев назад

Просмотрено 72к раз

У меня есть следующий код на https://jsfiddle. net/ncrcfduz и фоновое изображение на https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. Мне нужно изменить масштаб фонового изображения, чтобы оно поместилось в div, предпочитая отображать большую часть «центрированного» содержимого изображения. Следующий код показывает только верхний левый угол изображения.

 .контейнер {
  фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) исправлено отсутствие повторов;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
  высота: 150 пикселей;
  ширина: 300 пикселей;
}

 <дел>

css
фон
фоновое изображение

Вы ищете размер фона : содержит (см. запись MDN), а не покрывает . Чтобы ваш пример заработал, вам нужно удалить background-attachment: fixed . Используйте background-position: center , чтобы центрировать фон в вашем div

 .контейнер{
    фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов;
    -webkit-background-size: содержит;
    -moz-background-size: содержать;
    -o-фоновый размер: содержать;
    размер фона: содержит;
    
    высота: 150 пикселей;
    ширина: 300 пикселей;
}

 <дел>

Примечания:

В наши дни вам почти наверняка не нужны префиксы браузера, то есть вы можете просто использовать background-size: contains . См. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility
Если вы используете Autoprefixer (включенный во многие инструменты сборки и настройки сборки), он автоматически добавит вам все необходимые версии с префиксом, что означает, что вы можете сделать background-size: содержит , даже если в текущих версиях основных браузеров по-прежнему требуются префиксы.
Вы можете включить размер в сокращенное свойство background с синтаксисом background: / . Это будет выглядеть как

 .контейнер{
    фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов/содержать;
    высота: 150 пикселей;
    ширина: 300 пикселей;
}

вы должны использовать:

 .container{
    размер фона: 100%;
}

Вам просто нужно заменить «fixed» на «center» в вашей «фоновой» инструкции.

Вот так:

 фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов;

JSFiddle здесь: https://jsfiddle.net/ncrcfduz/2/

 .container{
    размер фона: содержит;
}

Я так решил. Вы можете установить свой код следующим образом:

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

 размер фона: 100% 100%;

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как изменить размер фоновых изображений с помощью CSS3 — SitePoint

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

Существует несколько способов определения размеров размеров — просмотреть демонстрационную страницу размера фона CSS3 .

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

Измерения длины могут быть применены с использованием:

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

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

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

 background-size: 100px 200px;

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

 размер фона: 100 пикселей;
/* идентично */
размер фона: 100 пикселей авто;

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

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

Если используется процент, размер основывается на содержащем элементе — НЕ размере изображения, например.

 background-size: 50% авто;

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

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

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

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

 background-size: contains;

Заливка фона

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

 background-size: cover;

Изменение размера нескольких фонов

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

 фон:
url("овца.png") 60% 90% без повторов,
url("sheep.png") 40% 50% без повторов,
url("sheep.png") 10% 20% без повторов #393;
размер фона: 240px 210px, авто, 150px;

Совместимость с браузерами

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

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

Сокращенная нотация

В спецификации W3C CSS Backgrounds and Borders Module Level 3 указано, что background-size может быть определено после background-position в сокращенной нотации background . Ни один из браузеров не поддерживает эту опцию, поэтому на данный момент background-size необходимо определить как отдельное свойство.

Просмотрите демонстрационную страницу CSS3 в фоновом режиме…

Поднимите свои навыки CSS на новый уровень с нашей книгой «Мастер CSS», 2-е издание Тиффани Б. Браун, в которой рассказывается об анимации CSS3, переходах, преобразованиях и многом другом.

Css размер фонового изображения: Как изменить размер фонового изображения с помощью CSS3

масштабируем фон — учебник CSS

Значения background-size

Ключевые слова

Числовые значения

Поддержка браузерами

background-size | WebReference

Краткая информация

Синтаксис

Значения

Песочница

Пример

Объектная модель

Примечание

Спецификация

Браузеры

См. также

Рецепты

Практика

Фоновое изображение CSS — уменьшить до фиксированного размера div

Примечания:

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Как изменить размер фоновых изображений с помощью CSS3 — SitePoint

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

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

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

Заливка фона

Изменение размера нескольких фонов

Совместимость с браузерами

Сокращенная нотация

Leave a Comment Отменить ответ

Leave a Comment
Отменить ответ