loader

Cвойство background-size указывает размер фоновых изображений. Существует четыре различных синтаксиса, которые можно использовать с этим свойством: синтаксис ключевого слова (auto, cover и contain), синтаксис с одним значением (устанавливает ширину изображения) (высота становится auto), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и синтаксис множественного фона (разделённые запятой).

background-size հատկությունը սահմանում է ֆոնային պատկերների չափը: Կան չորս տարբեր Գրելաձևներ, որոնք կարող են օգտագործվել այս հատկության հետ՝ հիմնաբառերի Գրելաձև (auto, cover և contain), մեկ արժեքի Գրելաձև (սահմանում է պատկերի լայնությունը) (բարձրությունը դառնում է auto), երկու արժեքի Գրելաձև (առաջին արժեքը՝ պատկերի լայնությունը, երկրորդ արժեքը՝ բարձրությունը) և բազմակի ֆոնային Գրելաձև (բաժանված ստորակետներով):

Синтаксис

Գրելաձև

background-size: auto; ⟿ Позволяет изменять размер фонового изображения.
background-size: contain; ⟿ Масштабирует картинку так, чтобы она максимально накрыла собой весь блок.
background-size: cover; ⟿ Масштабирует изображение как можно больше c сохранением пропорций изображения.
background-size: auto; ⟿ Թույլ է տալիս փոխել ֆոնային պատկերի չափը:
background-size: contain; ⟿ Մասշտաբացնում է պատկերն այնպես, որ այն հնարավորինս ծածկի ամբողջ բլոկը:
background-size: cover; ⟿ Որքան հնարավոր է մեծացնում է պատկերը` պահպանելով պատկերի կողմերի հարաբերակցությունը:

Пример

Օրինակ

See the Pen background-size: auto; by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen background-size: cover; by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen background-size: contain; by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

background-size image

Также у тега background есть следующие под. теги

Поддержка браузера дляԲրաուզերի աջակցությունը background-size элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 9+ 12+ 4+ 4+ 5+ 10+
Notes