Object Fit

Control how media content fits its container

Syntax

layout="object:[value]"

Values

Value	CSS Output	Description
contain	object-fit: contain	Scale to fit, preserve ratio
cover	object-fit: cover	Cover container, may crop
fill	object-fit: fill	Stretch to fill
none	object-fit: none	No scaling
scale-down	object-fit: scale-down	Smaller of none or contain

Examples

<img layout="object:cover">Cover image</img>

Preview

Object Fit Cover

layout="object:cover" - Image covers container, may crop

object:cover

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
    <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
  </div>
  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
</div>

Object Fit Contain

layout="object:contain" - Image fits inside, preserves ratio

object:contain

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
    <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
  </div>
  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
</div>