object-fit: contain for logos

Quick implementation

.logo-container {
  width: 8rem;
  height: 4rem;
  overflow: hidden;
}

.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* preserves aspect ratio */
  object-position: center; /* centers in the container */
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a logo display grid.

Goal: Display logo images of varying aspect ratios in uniform-sized
containers without distortion, using CSS object-fit: contain.

Technical constraints:
- Apply a fixed width and height to the image container.
- Set object-fit: contain on the img element to preserve aspect ratio.
- Set object-position: center to center the logo within the slot.
- Use oklch() for any color values — no hex or rgba.
- Add overflow: hidden to the container for safety.

Framework variant (pick one):
A) Vanilla CSS — .logo-container class for the wrapper, applied to any img.
B) React component — LogoSlot component accepting src, alt, width, and
   height props; renders the contained image inside a styled div.

Edge cases to handle:
- SVG logos without explicit width/height attributes may not render
  correctly — add width="100%" height="100%" to the SVG root or set
  explicit dimensions via CSS.
- Dark logos on dark backgrounds need a light-colored container background
  or a filter: invert() toggle.
- For grid layouts, use CSS grid with place-items: center to center each
  logo slot as well as the image within it.

Return CSS only (or a React component if variant B).

Why logo grids need a different approach

Logo grids and partner sections display logos of wildly different aspect ratios. The traditional approach — max-width: 100%; max-height: 100% — sizes the image correctly but cannot enforce a uniform slot size. object-fit: contain inside a fixed-size container solves this: every logo slot is exactly the same size, and each logo fits within it at its natural proportions.

Without a consistent slot size, logo grids look chaotic — a tall logo towers over a wide logo, and a square logo floats in the middle. Uniform slots create the visual rhythm that makes partner and client grids legible at a glance. The letterboxing introduced by contain (empty space at the edges) is invisible against a matching background color.

How object-fit: contain differs from cover

object-fit: contain makes the image scale uniformly — like background-size: contain — to fit entirely within its box. The entire image is always visible, with possible letterboxing at the sides or top and bottom. object-position controls where the contained image sits within that box; center is standard for logos.

Unlike object-fit: cover (which fills the box and may crop the image edges), contain ensures the entire image is always visible. For logos this is critical: a cropped logo can be unrecognisable or legally problematic if brand guidelines require the full mark. Use cover for editorial photos where some cropping is acceptable; use contain wherever the full image must be shown intact.

The third option — object-fit: fill (the default) — stretches the image to fill the box exactly, distorting its aspect ratio. This is almost never appropriate for logos and is what gives un-styled logo grids their characteristic squeezed appearance.

Accessibility and performance

Always provide meaningful alt text for logos — they identify brands. A blank alt="" is correct only if the logo is purely decorative and the brand name appears nearby in text. For a partner grid where the logo is the only brand identification, write alt="Acme Corp logo".

object-fit is handled by the browser compositor and has no performance overhead beyond normal image rendering. For large logo grids, consider using loading="lazy" on logos below the fold to defer their download. SVG logos are ideal for this pattern because they are resolution-independent and often smaller in file size than raster equivalents at display sizes.