background-size

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 есть следующие под. теги

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