> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Object Fit

> Control how images and video media fit inside fixed frames.

export const ObjectCoverDemo = () => {
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="50%" stop-color="#a855f7"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="800" height="600" fill="url(#g)"/><text x="400" y="320" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="sans-serif" font-size="48" font-weight="bold">800 x 600</text></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.object-cover</span>
        <div className="tw-demo-card" style={{
    padding: 0,
    overflow: "hidden",
    height: "12rem"
  }}>
          <img src={imgSrc} alt="Cover demo" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    display: "block"
  }} />
        </div>
      </div>
    </div>;
};

export const ObjectContainDemo = () => {
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="50%" stop-color="#a855f7"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="800" height="600" fill="url(#g)"/><text x="400" y="320" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="sans-serif" font-size="48" font-weight="bold">800 x 600</text></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.object-contain</span>
        <div className="tw-demo-card" style={{
    padding: 0,
    overflow: "hidden",
    height: "12rem"
  }}>
          <img src={imgSrc} alt="Contain demo" style={{
    width: "100%",
    height: "100%",
    objectFit: "contain",
    display: "block"
  }} />
        </div>
      </div>
    </div>;
};

export const ObjectFillScaleDemo = () => {
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="50%" stop-color="#a855f7"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="800" height="600" fill="url(#g)"/><text x="400" y="320" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="sans-serif" font-size="48" font-weight="bold">800 x 600</text></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div style={{
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: "1.5rem"
  }}>
          <div>
            <span className="tw-label">object-fill</span>
            <div className="tw-demo-card" style={{
    padding: 0,
    overflow: "hidden",
    height: "10rem"
  }}>
              <img src={imgSrc} alt="Fill demo" style={{
    width: "100%",
    height: "100%",
    objectFit: "fill",
    display: "block"
  }} />
            </div>
          </div>
          <div>
            <span className="tw-label">object-scale-down</span>
            <div className="tw-demo-card" style={{
    padding: 0,
    overflow: "hidden",
    height: "10rem"
  }}>
              <img src={imgSrc} alt="Scale-down demo" style={{
    width: "100%",
    height: "100%",
    objectFit: "scale-down",
    display: "block"
  }} />
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Use object-fit utilities on images or videos once the container has a known frame. The bundled set matches Tailwind-style naming: **`object-contain`**, **`object-cover`**, **`object-fill`**, **`object-none`**, and **`object-scale-down`**, with responsive **`--on-*`** variants where structural utilities support them.

| Class                | CSS                       | Usage                                                        |
| -------------------- | ------------------------- | ------------------------------------------------------------ |
| `.object-contain`    | `object-fit: contain;`    | Scale to fit inside the frame; whole asset visible           |
| `.object-cover`      | `object-fit: cover;`      | Fill the frame; crop if aspect ratios differ                 |
| `.object-fill`       | `object-fit: fill;`       | Stretch to fill width and height (may distort)               |
| `.object-none`       | `object-fit: none;`       | Ignore the box; use intrinsic size (often with width/height) |
| `.object-scale-down` | `object-fit: scale-down;` | Like `contain` or `none`, whichever yields a smaller size    |

## Object Cover

Use `.object-cover` when the frame matters more than seeing every edge of the image. The image fills the entire container and crops anything that doesn't fit.

<ObjectCoverDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded" style="width: 18rem; height: 10rem;">
  <img alt="Cover image" class="width-full height-full object-cover" src="image.jpg"/>
</div>
```

## Object Contain

Use `.object-contain` when the whole image or logo needs to stay visible. The image scales to fit inside the container without cropping.

<ObjectContainDemo />

```html theme={null}
<div class="elementor-element border-1 border-solid border-gray rounded" style="width: 18rem; height: 10rem;">
  <img alt="Contain image" class="width-full height-full object-contain" src="image.jpg"/>
</div>
```

## Fill and Scale Down

**`.object-fill`** stretches the media to the full width and height of the box. **`.object-scale-down`** never upscales past the intrinsic size; it behaves like **`contain`** or **`none`**, whichever results in a smaller rendered size.

<ObjectFillScaleDemo />

### Object none

**`.object-none`** keeps the replaced element’s default object sizing. Pair it with explicit **`width`**, **`height`**, or max dimensions when you need precise control.

## Best Practices

<Steps>
  <Step title="Set the Frame First">
    Object-fit only matters once the container has a known width, height, or aspect ratio.
  </Step>

  <Step title="Use Cover for Editorial Layouts">
    Card art, hero media, and gallery crops usually work best with `.object-cover`.
  </Step>

  <Step title="Use Contain for Product and Brand Assets">
    Logos and product images often need `.object-contain` so nothing important gets cropped.
  </Step>

  <Step title="Pair With Overflow Hidden">
    Cropped media looks cleaner when the container clips the edges.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Aspect Ratio" icon="bring-forward" href="/layout/aspect-ratio">
    Control container proportions
  </Card>

  <Card title="Overflow" icon="cube" href="/layout/overflow">
    Control clipping and scrolling
  </Card>
</CardGroup>