Object fit

Thin wrappers around the CSS object-fit property for replaced elements (img, video, canvas). All classes use !important so they override component-level rules regardless of source order.

How it works

  • One class per object-fit keyword:
    • .has-object-fit-contain — scale to fit inside the box, preserving aspect ratio (may letterbox).
    • .has-object-fit-cover — scale to fill the box, preserving aspect ratio (may crop).
    • .has-object-fit-fill — stretch to fill the box, ignoring aspect ratio.
    • .has-object-fit-scale-down — pick whichever of contain or none yields the smaller object.
    • .has-object-fit-none — render at intrinsic size, no scaling.
  • cover and contain cover roughly 95% of practical use cases; the rest exist for parity with the CSS spec.
  • Pair with the aspect-ratio helper when you need both a fixed-shape container and a precise fit mode for the media inside it.

Live

cover vs contain vs fill

cover
contain
fill
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
<figure>
  <div class="ratio ratio-1x1" style="background: var(--kc-default-bg);"><img class="has-object-fit-cover" src="https://picsum.photos/seed/kc-cover/320/180" alt="" /></div>
  <figcaption style="font-size: 0.8rem; text-align: center;">cover</figcaption>
</figure>
<figure>
  <div class="ratio ratio-1x1" style="background: var(--kc-default-bg);"><img class="has-object-fit-contain" src="https://picsum.photos/seed/kc-contain/320/180" alt="" /></div>
  <figcaption style="font-size: 0.8rem; text-align: center;">contain</figcaption>
</figure>
<figure>
  <div class="ratio ratio-1x1" style="background: var(--kc-default-bg);"><img class="has-object-fit-fill" src="https://picsum.photos/seed/kc-fill/320/180" alt="" /></div>
  <figcaption style="font-size: 0.8rem; text-align: center;">fill</figcaption>
</figure>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-object-fit', 'helper-ratio')
);
Playground

Markup

markup
<!-- Crop to fill the box, preserve aspect ratio -->
<img class="has-object-fit-cover" src="/photo.jpg" alt="" width="320" height="180" />

<!-- Fit entirely inside the box, may letterbox -->
<img class="has-object-fit-contain" src="/photo.jpg" alt="" width="320" height="180" />

<!-- Stretch to fill, ignore aspect ratio -->
<video class="has-object-fit-fill" src="/clip.mp4" width="320" height="180"></video>

Variables

VariableDefaultNotes
$selector-prefix'.has-object-fit-' (derived from variables.$selector-prefix-has)Prefix prepended to each $values entry. Override to '.object-' for Tailwind parity or any custom shape.
$values(contain, cover, fill, scale-down, none)One <prefix><value> class per entry. Trim the list to drop classes you never use.

Override example

app.scss
@use '@adnap/krysalicss/helper/object-fit' with (
  // Drop the rarely-used keywords to shrink the bundle:
  $values: (cover, contain),
);

Tokens consumed

None — purely structurel.