object-fit

Controls how replaced elements (img, video) fit within their container. Determines whether to crop while maintaining aspect ratio, or show the entire content.

Class List

Class	CSS	Description
`ofc`	object-fit: cover	fills container; maintains ratio, overflow cropped
`ofct`	object-fit: contain	shows entirely; maintains ratio, letterboxing possible

Visual Comparison

Compares the difference between cover and contain when placing the same image in a fixed-size container.

object-fit: cover — ofc

Fills the container completely. Maintains aspect ratio, overflowing parts are cropped

object-fit: contain — ofct

Shows entirely within the container. Maintains aspect ratio, letterboxing may occur

	ofc (cover)	ofct (contain)
fill method	Fills container with no gaps	Fits entirely within container
aspect ratio preserved	Preserved	Preserved
cropping	Overflowing parts cropped	Not cropped
letterboxing	None	Margins appear for ratio difference (letterbox)
primary use cases	Hero, avatar, thumbnail, background images	Product images, logos, icons

When to Use What?

Situation	Recommended	Reason
Hero image, banner	`ofc`	Fill completely for visual impact
User avatar	`ofc`	Square + br50p for circular avatar
Card thumbnail	`ofc`	Display images of various ratios uniformly
Product image	`ofct`	Full product must be visible, prevent cropping
Logo display	`ofct`	Logo must not be partially cropped
Gallery/portfolio	`ofc`	일관된 그리드 크기 Preserved

Class Details

`ofc`object-fit: cover

Fills the container completely while maintaining the image aspect ratio. Overflowing parts are cropped. The most commonly used pattern for hero images, avatars, and thumbnails.

<!-- Hero image -->
<div class="w100p h30rem oh br8px">
  <img src="hero.jpg" alt="hero" class="w100p h100p ofc" />
</div>

<!-- Circular avatar -->
<img src="avatar.jpg" alt="avatar" class="w6rem h6rem ofc br50p" />

<!-- Card thumbnail -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px">
    <img src="thumb1.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">Card Title</div>
  </div>
</div>

Common Combinations

`w100p h20rem ofc`	responsive image container (most basic)
`w6rem h6rem ofc br50p`	circular avatar
`w100p h30rem ofc br8px`	rounded-corner hero image
`ar16-9 w100p ofc`	16:9 ratio fixed image

`ofct`object-fit: contain

Fits the entire image within the container. Maintains aspect ratio; if the container and image ratios differ, letterboxing occurs. Used when the full image must be shown without cropping, such as product images and logos.

<!-- Product image -->
<div class="w100p h24rem bg18181B br8px">
  <img src="product.jpg" alt="product" class="w100p h100p ofct" />
</div>

<!-- Logo display -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
  <img src="logo.svg" alt="logo" class="w100p h100p ofct" />
</div>

Common Combinations

`w100p h24rem ofct`	product image (show full)
`w12rem h6rem ofct p8px`	logo container (with padding)
`ar4-3 w100p ofct bg18181B`	4:3 ratio + background color for letterbox

Common Patterns

The basic pattern for responsive image containers is w100p h20rem ofc.

<!-- Responsive image container (default pattern) -->
<img src="photo.jpg" alt="" class="w100p h20rem ofc" />

<!-- Card grid + uniform thumbnails -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <div class="oh br8px bg18181B">
    <img src="1.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
  <div class="oh br8px bg18181B">
    <img src="2.jpg" alt="" class="w100p h20rem ofc" />
    <div class="p16px">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>

<!-- Avatar list -->
<div class="df gap8px">
  <img src="u1.jpg" alt="" class="w4rem h4rem ofc br50p" />
  <img src="u2.jpg" alt="" class="w4rem h4rem ofc br50p" />
  <img src="u3.jpg" alt="" class="w4rem h4rem ofc br50p" />
</div>

Tips & Notes

Replaced elements only

ofc and ofct only work on replaced elements such as img, video, and canvas. They have no effect on regular div elements.

Creating circular avatars

Combine ofc with br50p to crop any aspect ratio image into a circle. Example: w6rem h6rem ofc br50p

width/height required

object-fit requires explicit dimensions on the element. Always set the container size with w100p h20rem etc.

aspect-ratio width height overflow