What is the difference between cover and contain?

Cover fills the target box and crops overflow. Contain fits the whole image inside the box and may letterbox (empty bars) if aspects differ.

When is stretching acceptable?

Almost never for photos or product shots. Only consider non-uniform scale for abstract textures or deliberate distortion — never for packaging text.

How do I keep aspect ratio when I only know max width?

Set the max edge (width or height), compute the other edge from the original ratio, and export. Do not force both width and height independently.

Resize Without Cropping — Letterbox

A product thumbnail comes back from “quick resize” with the brand label sliced off the bottom. Someone forced a square crop with cover semantics when the asset was a tall pack shot. The opposite failure — letterboxing with huge empty bars — shows up when contain is used inside a layout that expected a filled tile. Resizing without thinking about fit mode is how marketing assets silently degrade.

Two verbs you must name explicitly

Contain (letterbox / pillarbox) — Scale uniformly until the entire image fits inside the target rectangle. Empty regions appear if aspects differ. Nothing important is cropped; the frame may not be fully filled.

Cover (crop to fill) — Scale uniformly until the rectangle is filled. Overflow is cropped. The frame is full; edges of the subject may disappear.

Stretch (non-uniform) — Force exact width and height independently. Distorts the subject. Avoid for anything with type, faces, or packaging.

If a ticket says “resize to 1200×630” without saying contain or cover, you do not yet have requirements.

Decision guide by use case

Destination	Prefer	Why
Product catalog tile	Cover with focal point, or shoot for the ratio	Grid expects filled cells
Legal / label must stay whole	Contain + background	Cropping text is a defect
Blog hero / OG image	Cover with careful focal crop	Platforms expect exact ratios
App icon from a wide logo	Contain on brand-colored canvas	Do not squash the wordmark
Background texture	Stretch sometimes OK	No critical geometry

For faces and packaging, set a focal point (CSS object-position, or crop tools with face detection) when you choose cover.

CSS vs export pipeline

In the browser:

.thumb {
  width: 240px;
  height: 240px;
  object-fit: cover; /* or contain */
  object-position: center 20%;
}

object-fit does not replace exporting correctly for email, ads, or stores that ingest flat files. Those systems need pixels already correct.

In an export tool: lock aspect ratio, choose the fit mode, then set the target box. Preview at 100% — letterboxing that looks fine in a dark UI can look broken on a white marketplace background. Paint letterbox bars a deliberate brand color when contain is required.

A workflow that prevents “squashed” uploads

Read the platform’s required dimensions and whether cropping is allowed.
Compare source aspect to target aspect.
If they match, scale uniformly to size.
If they differ, pick contain or cover in writing.
Soft-proof: zoom to the region that holds text or logos.
Only then run compression (WebP/JPEG quality).

Use image-resize when you need a quick, local resize with aspect lock before you drop files into a CMS — confirm the output ratio matches the slot you are filling.

Talking to design and marketing

Document a one-pager:

Default for product grids: cover, focal center-top
Default for certificates / full-pack shots: contain on #FFFFFF
Forbidden: stretch to “make it fit”

When someone asks why there are bars, point at the doc instead of re-litigating geometry every sprint.

Quick red flags in review

Width and height both set on export with “don’t maintain aspect” checked
Square crop of a wide banner that cuts off the CTA text in-frame
Different fit modes across the same product carousel

Name the fit mode, lock the ratio, and treat cropping as a product decision — not an export checkbox you click under time pressure.

Tools

Resize Without Cropping — Letterbox vs Cover