Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Размер фонового изображения

.

Размер фонового изображения

Свойство background-size позволяет вам указать желаемый размер фонового изображения. Теоретически, вы можете включить его значение в краткую декларацию сразу после позиции вывода, разделив их косой чертой (/). На практике же ни один браузер такую запись не воспринимает; более того, они полностью игнорируют всю декларацию, считая, что допущена ошибка. Так что хочешь не хочешь, а приходится применять отдельную запись для свойства background-size.

Поддержка этого свойства со стороны браузеров такова:

• Opera 11.01+: background-size (без префикса);

• Safari и Chrome: современные версии поддерживают беспрефиксный вариант, а для более старых требовался префикс -webkit-background-size;

• Firefox: -moz-background-size для 3.6, background-size для4+;

• IE9:background-size.

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

Объявляя размер в пикселах, всегда помните о возможности искажений пропорций. Указывайте либо ширину, либо высоту, но не то и другое сразу. Это позволит избежать сжатия или растяжения картинки. Если вы включаете только одно значение, подразумевается, что другой имеет значение auto. Иными словами, нижеприведенные строки эквивалентны:

background-size:   10Орх auto,  auto auto; background-size:   100рх,  auto auto;

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

-webkit-background-size:  100рх,   cover; -moz-background-size:  100рх,   cover; -o-background-size:   100рх,  cover; background-size:  100рх auto,   cover;

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

Значение contain масштабирует изображение, стремясь сохранить правильные пропорции; при этом могут остаться «пустоты». Значение cover масштабирует изображение так, чтобы вся площадь элемента была закрыта. При этом изображение может оказаться обрезанным, если соотношение сторон картинки и элемента окажется разным.

.

Читайте так же:
Not found