Zero Signup ToolsFree browser tools

Generator Tools

CSS Object Fit Generator

Visual editor for CSS object-fit and object-position. Live preview, side-by-side compare of all five values, copy-ready CSS, Tailwind, JSX.

object-fit

Scales the content to cover the box completely. Cropped on one axis.

Sample image

Landscape image: highlights crop differences on the y axis.

Preview

320px x 200px box, object-fit: cover, object-position: center

object-fit preview

object-position

0,0100,00,100100,100

Drag the dot inside the box to set object-position. The X / Y sliders below stay in sync.

Position presets

When this field is filled, the custom value overrides the X / Y sliders in the generated CSS. Lengths (10px), percentages, or two keywords are all valid.

Output

Copy the rule, the Tailwind class set, or the JSX inline style.

CSS rule

.media {
  object-fit: cover;
  object-position: center;
}

Inline CSS

object-fit: cover; object-position: center;

JSX inline style

style={{ objectFit: "cover", objectPosition: "center" }}

Tailwind classes

object-cover object-center

All five values, side by side

Same image, same box, same position. Only the object-fit value changes.

fill

object-fit preview

Stretches the content to fill the box (default). Aspect ratio is not preserved.

contain

object-fit preview

Scales the content down to fit inside the box. Letterboxing on one axis.

cover

Active
object-fit preview

Scales the content to cover the box completely. Cropped on one axis.

none

object-fit preview

Renders the content at its intrinsic size. Cropped if larger than the box.

scale-down

object-fit preview

Whichever of none or contain produces the smaller content. Never enlarges.

What each value does

  • fill (default): stretches the content to fill the box on both axes. The intrinsic aspect ratio is ignored, so the image is distorted whenever the box and the image have different ratios.
  • contain: scales the content down until it fits entirely inside the box on both axes. Letterboxing or pillarboxing appears on the axis where the content is smaller than the box.
  • cover: scales the content up until the box is fully covered. Aspect ratio is preserved, so the content is cropped on the axis where it overflows. This is the default for hero images and thumbnails.
  • none: ignores the box entirely and renders the content at its intrinsic size. The content is centered (or wherever object-position points) and clipped if it is larger than the box.
  • scale-down: uses whichever of none or contain produces the smaller content. Never enlarges the content, which is what you usually want for thumbnails that mix small and large source images.
  • object-position controls the focal point of the cropping (cover and none) or the anchor inside the box (contain). Values can be two percentages, two lengths, or two keywords (top, right, bottom, left, center) in any combination.

How to use

  1. Pick an object-fit value (fill, contain, cover, none, or scale-down). The preview updates instantly to show what each value does.
  2. Choose a sample image (wide 16:9, square 1:1, tall 9:16) or paste a custom image URL to test the rule against your own artwork.
  3. Drag the dot inside the XY pad to set object-position, click a keyword preset (top, center, bottom-right, etc.), or use the X / Y sliders for precise percentages.
  4. Adjust the container width and height sliders to mirror the box your image will live in. The preview reflows so cropping and letterboxing are accurate.
  5. Scroll to the side-by-side panel to see all five object-fit values at once, then copy the CSS rule, the Tailwind class set, or the JSX inline style from the output panel.

About this tool

CSS Object Fit Generator is a visual playground for the two CSS properties that decide how a replaced element (img, video, canvas, iframe, object, embed) fills the box it lives in. Pick any of the five object-fit values (fill, contain, cover, none, scale-down) and drag the object-position focal point inside an XY pad, on the X / Y sliders, or with the nine keyword presets (top left, top, top right, left, center, right, bottom left, bottom, bottom right). A live preview applies the exact rule to a real img element at the dimensions you choose, so the rendered result is the rendered result, not a simulation. Three built-in sample images at 16:9, 1:1, and 9:16 aspect ratios make the difference between contain and cover impossible to miss, and a Custom URL field lets you point at any web image to test the rule against the artwork you actually ship. A side-by-side comparison panel renders all five object-fit values on the same image, same box, and same position at once, so the answer to questions like object-fit cover vs contain or what is object-fit scale-down is a glance away. The output panel emits four copy-ready forms: a full CSS rule with your selector, an inline CSS declaration, a JSX inline-style snippet for React, and a Tailwind class set that uses the named object-cover, object-contain, object-fill, object-none, object-scale-down utilities plus the named object-position utilities for keyword positions or arbitrary-value brackets for custom values. Keyword positions are emitted as keywords (cleaner output) rather than as percentages whenever a preset matches exactly. Drag the focal point with a mouse, finger, or arrow keys (shift for 10% steps) so the tool is usable on touch screens and with the keyboard alone. Useful for front-end developers picking the right object-fit for a card thumbnail or a hero image, designers tuning the focal point of a product photo so the subject stays in frame on every breakpoint, anyone migrating from background-image to img + object-fit, and anyone who has ever asked what is the difference between object-fit cover and object-fit contain. Everything happens locally in your browser. The CSS is generated by string concatenation, the preview is rendered by the browser's own layout engine, and the only network request the tool ever makes is when you point Custom URL at an external image, which the browser then fetches directly for display.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Generator

CSS Aspect Ratio Generator

Build CSS aspect-ratio rules with presets, a live preview, the padding-bottom fallback, Tailwind, and JSX.

Open tool

Image

Image Cropper

Drag a crop box, lock common aspect ratios, rotate, flip, and download.

Open tool

Generator

CSS Clip Path Generator

Drag polygon points to build CSS clip-path shapes with a live preview.

Open tool

Image

Image Resizer

Resize images by exact pixels, percent, or fit-to dimensions with locked aspect ratio.

Open tool

Image

Image Aspect Ratio Finder

Find the simplified aspect ratio, decimal ratio, and closest standard match of any image.

Open tool

Generator

CSS Grid Generator

Visual builder for grid-template-columns, rows, gap, alignment, and per-item placement.

Open tool

All toolsGenerator Tools