Важно знать: данное свойство не работает в IE8 и более старых браузерах. Если вы ориентируетесь на эти версии, будьте готовы к неприятному сюрпризу! С помощью свойства background-size вы можете точно контролировать размер фонового изображения, делая его идеальным по размеру для вашего дизайна. | Значение по умолчанию: | auto | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.backgroundSize="60px 80px" | | Значение | Описание | | auto | Это стандартное значение. Изображение отображается в своем оригинальном размере, без каких-либо изменений. | | length | Позволяет задать точные значения ширины и высоты в пикселях (например, 10px 10px). Первое число - это ширина, второе - высота. Удобно то, что если вы укажете только одно значение, второе рассчитается автоматически, сохраняя пропорции картинки. | | percentage | Устанавливает размеры в процентах от контейнера. Первое значение отвечает за ширину, второе - за высоту. Если указать лишь одно, второе подстроится автоматически под исходную ширину изображения. | | cover | Отлично подходит для обложек! Масштабирует изображение так, чтобы оно полностью закрыло область элемента или окна браузера, при этом сохраняя свои пропорции (часть картинки может обрезаться). | | contain | Обеспечивает, чтобы вся картинка была видна целиком внутри элемента или окна браузера, сохраняя ее пропорции. Может оставаться пустое пространство по краям. | Пример
|