Control how replaced elements (img, video) fill their box: cover, contain, fill, none, scale-down — and where they anchor. This family contains 14 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;
object-bottomobject-position: bottom;
object-centerobject-position: center;
object-leftobject-position: left;
object-left-bottomobject-position: left bottom;
object-left-topobject-position: left top;
object-rightobject-position: right;
object-right-bottomobject-position: right bottom;
object-right-topobject-position: right top;
object-topobject-position: top;

Example#

example
html
<img class="h-64 w-full object-cover object-center" src="hero.jpg" alt="Sunset over Dhaka" />

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • object-cover + fixed height is the canonical card image pattern
  • Pair with aspect-video for predictable media slots

Common mistakes#

  • object-* only affects replaced elements — it does nothing on a div

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive