Object Fit, Float and Clear

object-* utilities control how an img or video fills a box of a different shape (Imaging). isolate creates a stacking context, and float-*/clear-* wrap text around an element, the one job floats still do well (Min-, Max- Lengths and Float).

Object, isolation, float and clear utilities
Utility	CSS
object-cover, object-contain, object-fill	object-fit: cover, contain, fill
object-none, object-scale-down	object-fit: none, scale-down
object-bottom-right, object-[25%_75%]	object-position: bottom right, 25% 75%
isolate, isolation-auto	isolation: isolate, auto
float-left, float-start, float-none	float: left, inline-start, none
clear-both, clear-end, clear-none	clear: both, inline-end, none

An underscore in an arbitrary value stands for a space. The demo draws a 2:1 test image in a script and shows it in three square boxes beside a floated box.

object-fit in square boxes and a floated boxHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
<div class="flex gap-6 p-4 font-sans text-sm">
  <div class="grid shrink-0 grid-cols-3 gap-x-3 text-center *:w-20">
    <img alt="" class="h-20 rounded bg-slate-200 object-cover">
    <img alt="" class="h-20 rounded bg-slate-200 object-contain">
    <img alt="" class="h-20 rounded bg-slate-200 object-fill">
    <code>cover</code><code>contain</code><code>fill</code>
  </div>
  <p><span class="float-left mr-2 size-12 rounded bg-amber-400"></span>This paragraph wraps
    around a <code>float-left</code> box. Use <code>clear-both</code> on the next block, or
    <code>flow-root</code> on the parent, to stop the wrapping.</p>
</div>
<script>
  const svg = "<svg xmlns='http://www.w3.org/2000/svg' width='300' height='150'>" +
    "<rect width='300' height='150' fill='%230284c7'/>" +
    "<circle cx='150' cy='75' r='60' fill='%23facc15'/></svg>";
  document.querySelectorAll("img").forEach(img => img.src = "data:image/svg+xml," + svg);
</script>

Browser output of 22

object-cover crops the sides, object-contain letterboxes, and object-fill squashes the circle. Thumbnails usually combine aspect-square w-full object-cover, adding object-top for portraits. Put isolate on a component whose children use -z-10 backgrounds or mix-blend-mode: it creates a stacking context without the side effects of z-index, transform or opacity, so those children cannot slip behind the page.

MENU