object-fit

Cвойство object-fit позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры. По своему поведению очень похоже на свойство background-size для фоновых изображений. Дословно свойство переводится как «объект подходит», что вполне точно отражает принцип его работы. Свойство управляет тем, как подгружаемая картинка будет вписываться в рамки заданных размеров.

object-fit հատկությունը թույլ է տալիս վերահսկել, թե ինչպես <img> պատկերը կամ <video> տեսանյութը կհարմարվի նշված չափերին: Այս հատկությունը դրսեվորում է իրեն այնպես, ինչպես background-size հատկությանը գործում է ֆոնային պատկերների վրա: Բառացիորեն հատկությունը թարգմանվում է որպես «օբյեկտը համապատասխանում է», ինչը բավականին ճշգրիտ կերպով արտացոլում է դրա գործունեության սկզբունքը: Հատկությունը վերահսկում է, թե ինչպես է բեռնված պատկերը տեղավորվում նշված չափսերի մեջ:

Синтаксис

Գրելաձև

object-fit: fill; ⟿ Картинка полностью вписывается в указанные размеры.
object-fit: contain; ⟿ Картинка подстроится под заданные размеры.
object-fit: cover; ⟿ Картинка без нарушения пропорций заполнит всю доступную область.
object-fit: none; ⟿ Картинка отображается без изменения.
object-fit: scale-down; ⟿ Смесь none и contain при этом выбирает одно и деформирует. object-fit: fill; ⟿ Նկարը հիանալի տեղավորվում է նշված չափսերի մեջ։.
object-fit: contain; ⟿ Պատկերը կհարմարվի նշված չափերին:.
object-fit: cover; ⟿ Պատկերը, առանց համամասնությունների խախտման, կլրացնի ողջ հասանելի տարածքը.
object-fit: none; ⟿ Պատկերը ցուցադրվում է առանց փոփոխության.
object-fit: scale-down; ⟿ none-ի և contain-ի խառնուրդ՝ ընտրում է մեկը և դեֆորմացնում.

Пример

Օրինակ

See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

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

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

Поддержка браузера дляԲրաուզերի աջակցությունը object-fit элемента տարրին
Browser	IE	Edge	Chrome	Firefox	Safari	Opera
Version	6+	79+	32+	36+	10+	19+
Notes