responsive images

Why Is My Image Cropped Wrong on Mobile?

by

Image cropped wrong on mobile problems usually happen when a desktop image is forced into a mobile container with object-fit:cover, a fixed height, the wrong object-position, or a background image with the wrong focal point.

Mobile Image Crop Fix

Why is my image cropped wrong on mobile?

An image cropped wrong on mobile can cut off a face, product, logo, headline area, or important detail. The image is not necessarily broken. The browser is usually doing exactly what the CSS asked: filling a narrow mobile box with cover. The fix is to control the image ratio, focal point, object position, and mobile crop rules instead of letting the browser guess.

Responsive Fixes CSS Fixes
  • object-fit
  • object-position
  • aspect-ratio
  • background-position

What the bug looks like

The subject disappears, a face is cut off, a product is too zoomed in, or only the wrong side of the image is visible.

Why it happens

The mobile container has a different shape than the image, so the browser crops the image to fill the box.

What usually fixes it

Use a better aspect ratio, adjust object-position, avoid tiny fixed heights, or provide a mobile-specific crop.

Error 1

object-fit:cover is cropping the wrong part

object-fit:cover is not bad. It is often the right choice for cards and hero images. But on mobile, a narrow container can crop the subject if the focal point stays in the wrong place.

Broken code

Default center crop 
.hero-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center center;
}

Broken visual result

Important area is cut
bad crop
Mobile hero

The crop fills the box but cuts away the focal point.

Cover fills the container, but the default center crop does not protect the subject.

Correct code

Control focal point 
.hero-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 28%;
}

Fixed visual result

Subject stays visible
focal point
Mobile hero

The crop still fills the box, but the important area stays in view.

object-position tells the browser which part of the image should stay visible.
Error 2

The mobile image container is too short

A short fixed-height container makes the crop more aggressive. If the image has important vertical detail, a tiny mobile height can remove the top, bottom, or center of the subject.

Broken code

Fixed short height 
@media (max-width: 640px) {
  .image-wrap {
    height: 120px;
    overflow: hidden;
  }

  .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Broken visual result

Container forces harsh crop
too short
Article card

The image box is too short for the visual content.

A short mobile container can crop too much even when the image width is responsive.

Correct code

Use aspect ratio 
.image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Fixed visual result

Crop has room
aspect ratio
Article card

The image keeps a consistent shape without being squeezed flat.

aspect-ratio is usually safer than a tiny fixed height for responsive images.
Error 3

background-size:cover uses the wrong background position

Background images have the same crop problem as normal images. If you use background-size:cover without adjusting background-position, mobile can show the wrong part of the image.

Broken code

Background centered blindly 
.hero {
  background-image: url(hero.jpg);
  background-size: cover;
  background-position: center;
}

Broken visual result

Wrong part of background
wrong focus
Background hero

The background fills the section, but the subject is not where mobile needs it.

Background cover needs a mobile-aware focal point, not just center center.

Correct code

Mobile background focal point 
.hero {
  background-image: url(hero.jpg);
  background-size: cover;
  background-position: center top;
}

@media (max-width: 640px) {
  .hero {
    background-position: 35% center;
  }
}

Fixed visual result

Background focuses correctly
positioned
Background hero

The mobile background position keeps the important part visible.

For background images, background-position is your focal point control.
Error 4

You need a mobile-specific crop, not just CSS positioning

Sometimes the desktop image is simply the wrong shape for mobile. If the important content is spread across a wide image, no amount of object-position will make every detail fit in a narrow crop.

Broken code

One image for every screen 
<img
  class="hero-image"
  src="desktop-wide-image.jpg"
  alt="Product preview"
>

Broken visual result

Desktop crop does not translate
wrong source
Product image

The desktop composition is too wide for mobile.

One desktop image may not be enough when mobile needs a different composition.

Correct code

Use picture source 
<picture>
  <source
    media="(max-width: 640px)"
    srcset="mobile-crop.jpg"
  >
  <img
    class="hero-image"
    src="desktop-wide-image.jpg"
    alt="Product preview"
  >
</picture>

Fixed visual result

Mobile gets the right crop
mobile source
Product image

The mobile version is composed for the mobile container.

<picture> lets you serve a mobile crop when CSS alone cannot protect the subject.
Premium pattern

A production-minded responsive image crop pattern

A reliable responsive image pattern controls the container ratio, image fitting behavior, focal point, and optional mobile source. It does not depend on one desktop crop magically working everywhere.

Premium code

Safe responsive image crop 
<picture class="media">
  <source
    media="(max-width: 640px)"
    srcset="image-mobile.jpg"
  >
  <img
    class="media__image"
    src="image-desktop.jpg"
    alt="Descriptive image alt text"
  >
</picture>
.media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
}

.media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center);
}

@media (max-width: 640px) {
  .media {
    aspect-ratio: 4 / 3;
  }

  .media__image {
    object-position: var(--image-focus-mobile, center 30%);
  }
}

Premium visual result

Responsive crop with focal control
premium
Premium media block

The crop changes safely on mobile without losing the important subject.

Premium image CSS does not avoid cropping forever. It makes the crop intentional.

Fast practical rule

If an image is cropped wrong on mobile, do not remove object-fit:cover immediately. First adjust the container ratio and object-position. If the desktop composition still fails, use a mobile-specific crop with <picture>.

Debug checklist

  • Inspect the image container height, width, and aspect ratio on mobile.
  • Check whether the image uses object-fit:cover or a background with background-size:cover.
  • Adjust object-position to protect the image’s focal point.
  • For background images, adjust background-position at mobile breakpoints.
  • Replace tiny fixed heights with aspect-ratio where possible.
  • Use object-fit:contain only when showing the full image matters more than filling the box.
  • Use <picture> when mobile needs a different crop or composition.
  • Test real images, not only placeholder rectangles, because focal points change the result.
Best first move Change object-position in DevTools and see whether the important subject comes back.
Most common cause A desktop image is being forced into a narrow mobile container with cover.
Most sneaky cause A background image has the right size but the wrong mobile background position.
Better mindset Cropping is not always a bug. Uncontrolled cropping is the bug.

Related fixes that can help

Mobile image cropping often connects to responsive layout, container width, grid overflow, page width, and mobile horizontal scroll.

Fix responsive design not working If the image crop only breaks after a mobile breakpoint. Read this fix
Fix container width problems If the image wrapper is the wrong size before the image even loads. Read this fix
Why is my grid column overflowing? If the image is inside a CSS Grid column and affects the layout. Read this fix
Fix CSS Grid Breaking on Mobile If image cards break when the grid stacks or changes columns. Read this fix
Why is my page wider than the screen? If the image crop problem also creates horizontal overflow. Read this fix
Horizontal Scroll on Mobile? If images or wrappers are creating sideways scrolling. Read this fix

Final takeaway

An image cropped wrong on mobile is usually a responsive composition problem. The image is being forced into a mobile shape, and the browser has to decide what to cut.

Control the crop intentionally. Use a safer aspect ratio, choose the right object-position or background-position, and use a mobile-specific crop when the desktop image cannot work on a narrow screen.

Want more fixes like this?

Browse more image, mobile, and responsive CSS debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

Why Is My Image Leaving Empty Space Around It?

by

Image leaving empty space around it problems usually happen because the image is inline, the container has padding, the image aspect ratio does not match the box, or default spacing is coming from margins and line-height.

CSS Image Layout Fix

Why is my image leaving empty space around it?

An image can look like it has mysterious blank space around it: a small gap under the image, extra padding inside a card, empty space at the top, or unused space because the image does not fill its container. The real cause is usually not the image itself. It is how the image is displayed, how the container is sized, or how the aspect ratio is being handled.

Browse CSS Fixes Browse All Fixes
  • Image gap
  • display block
  • object-fit
  • aspect-ratio

What the bug looks like

There is a blank strip below the image, empty bands around it, or a card image that refuses to fill the visible frame.

Why it happens

The image display mode, wrapper spacing, aspect ratio, or fitting rule does not match the visual layout you expect.

What usually fixes it

Use display:block, remove unwanted wrapper spacing, set a clear aspect ratio, and use object-fit intentionally.

Error 1

The image is inline and leaves a baseline gap

Images are inline elements by default. Inline elements align with the text baseline, leaving room for letters that drop below the line. That is why a small gap can appear under an image.

Broken code

Inline image 
.card img {
  width: 100%;
}

Broken visual result

Baseline gap
baseline gap
The image behaves like inline text, so the browser leaves space under it.

Correct code

Block image 
.card img {
  display: block;
  width: 100%;
  height: auto;
}

Fixed visual result

Gap removed
A block image no longer reserves baseline space below itself.
Error 2

The container padding is creating the empty space

Sometimes the image is not the problem. The parent card has padding, so the image cannot touch the edge of the card even when it is set to 100% width.

Broken code

Padded wrapper 
.card {
  padding: 24px;
}

.card img {
  width: 100%;
}

Broken visual result

Space comes from parent
padding space
The image is respecting the padded content area, not the outer card edge.

Correct code

Separate media and content 
.card-media img {
  display: block;
  width: 100%;
  height: auto;
}

.card-content {
  padding: 24px;
}

Fixed visual result

Media fills the card top

The image and content now have separate spacing rules.

Keep image spacing and text spacing separate when the image should touch the card edge.
Error 3

The image aspect ratio does not match the container

If a container has a fixed height but the image has a different shape, the image may leave empty space or look visually disconnected unless you choose how it should fit.

Broken code

Unclear fitting 
.image-box {
  height: 190px;
}

.image-box img {
  width: 100%;
  height: auto;
}

Broken visual result

Unused container space
empty area
The image sizing rule does not explain how to fill a fixed-height frame.

Correct code

Object-fit cover 
.image-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Fixed visual result

Frame is filled
The image now has a clear frame and a clear fitting strategy.
Error 4

Margins on the image or figure create extra spacing

Images often live inside figure, card, or editor-generated wrappers. A margin on the image, figure, or caption can look like mysterious empty space unless you inspect the wrapper.

Broken code

Default margin 
figure {
  margin: 1em 40px;
}

figure img {
  width: 100%;
}

Broken visual result

Wrapper creates space
The empty space is coming from wrapper spacing, not from the image file.

Correct code

Reset wrapper spacing 
.card figure {
  margin: 0;
}

.card figure img {
  display: block;
  width: 100%;
  height: auto;
}

Fixed visual result

Wrapper no longer adds space
Reset wrapper margins only where the design needs the image to sit flush.
Premium pattern

A production-minded image card pattern

A stronger image setup separates the media area from the content area, controls aspect ratio, removes baseline gaps, and uses object-fit intentionally.

Premium code

Controlled media frame 
.card {
  overflow: hidden;
  border-radius: 24px;
}

.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 24px;
}

Premium visual result

No mystery spacing

The image has a dedicated media frame, and the text has its own content spacing.

Premium image layouts do not guess. They define display mode, aspect ratio, fitting, and content spacing.

Fast practical rule

If an image leaves empty space, inspect the image and the wrapper separately. Check display, margins, padding, aspect ratio, fixed heights, and object-fit. The blank space usually belongs to one of those, not to the image itself.

Debug checklist

  • Set important card images to display:block.
  • Check whether the parent card or figure has padding or margins.
  • Inspect whether the empty space is inside the image box or outside it.
  • Use aspect-ratio when the image frame should keep a consistent shape.
  • Use object-fit:cover when the frame should be filled.
  • Use object-fit:contain only when showing the full image matters more than filling the frame.
  • Separate image/media spacing from card content spacing.
  • Do not hide spacing with random negative margins until you know where it comes from.
Best first move Inspect the image and parent wrapper to see whether the space comes from display, padding, margin, or height.
Most common cause The image is inline and leaves a baseline gap underneath.
Most visual cause The image aspect ratio does not match the container frame.
Better mindset Image layout needs a media frame, not just width:100%.

Related fixes that can help

If an image leaves empty space, the surrounding issue may involve stretching, overflow, grid behavior, or responsive layout.

Why is my image stretching in CSS? If the image fills the frame but looks distorted or squeezed. Read this fix
Horizontal scroll on mobile? If the image or wrapper makes the page wider than the viewport. Read this fix
Why is my CSS Grid breaking on mobile? If image cards are part of a grid that fails on smaller screens. Read this fix

Final takeaway

Image leaving empty space around it is usually not mysterious. The image may be inline, the wrapper may have padding or margin, the aspect ratio may not match, or the fitting rule may preserve space instead of filling the frame.

Start by separating the image from its container in DevTools. Once you know whether the gap belongs to the image, wrapper, or frame, the fix becomes simple and much cleaner.

Want more fixes like this?

Browse more CSS image and layout debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Gap Under Image CSS? Fix the Invisible Layout Space

by

Gap under image CSS problems usually happen because an image is still behaving like inline text, so the browser reserves baseline space below it.

CSS Layout Fix

Gap Under Image CSS? Fix the Invisible Layout Space

A small gap under an image can make a card, banner, thumbnail, figure, or hero section look slightly broken. The confusing part is that the image may have no margin, the wrapper may have no padding, and the layout can still show a thin strip under the image. In most cases, that gap is not a box-model problem. It is inline baseline spacing.

Browse All Fixes Explore CSS Fixes
  • Image baseline gap
  • Card image spacing
  • One-line CSS fix
  • Responsive image reset

What the bug looks like

A thin strip of parent background appears under the image, especially inside cards, wrappers, figures, galleries, product thumbnails, and hero sections.

Why it happens

The image sits on the inline text baseline. The gap is the browser preserving room for text descenders below that baseline.

What usually fixes it

Set the image to display:block, or use vertical-align:bottom if the image must remain inline.

Why gap under image CSS bugs happen

Images feel like boxes, but HTML does not automatically treat them as block-level layout boxes. By default, an image is an inline replaced element. That means it participates in a line box, similar to inline text. Because inline text needs space below the baseline for descenders, the browser can reserve a little empty space under the image.

This is why the bug often looks impossible at first. You inspect the image, the wrapper, and the card. You do not see margin. You do not see padding. But the gap is still there because the spacing is coming from inline formatting behavior, not from the normal margin or padding you expected.

Error 1

The image is still inline

This is the classic version of the bug. The image fills the wrapper, but the browser still treats it like inline content sitting on a baseline. The container background shows through below the image.

Broken code

Inline image trap 
<div class="image-card">
  <img src="photo.jpg" alt="Example image">
</div>
.image-card {
  background: #111827;
}

.image-card img {
  width: 100%;
  height: auto;
}

Broken visual result

Baseline space visible
Image behaves like inline text Gap visible

The dark strip under the image is not a margin. It is the inline baseline gap showing through.

Correct code

Block image 
.image-card img {
  display: block;
  width: 100%;
  height: auto;
}

Fixed visual result

Gap removed
Image behaves like a block No baseline gap

Once the image becomes a block, it no longer reserves text descender space under itself.

Error 2

You are debugging margin or padding instead of baseline spacing

Developers often lose time removing margin, changing padding, setting fixed heights, or hiding overflow. Those changes may accidentally hide the symptom, but they do not explain the real cause. The root issue is usually the inline formatting context.

Wrong direction

False fix 
.image-card {
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
}

What is really happening

The image sits on a line baseline. The browser reserves room below that baseline for text descenders.

Correct direction

Change image behavior 
.image-card img {
  display: block;
}

Why this is cleaner

Instead of fighting the wrapper, you change the image itself from inline behavior to block behavior. That removes the baseline relationship directly.

Use margin and padding when you want intentional spacing. Use display:block when you want an image to fit flush inside a visual container.

Error 3

The image is inside a card, so the tiny gap becomes obvious

The baseline gap is always small, but card designs make it visible. Cards often have borders, shadows, rounded corners, dark backgrounds, or cropped image areas. That makes a tiny gap look like a broken visual detail.

Broken card pattern

Card media gap 
.card {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
}

.card img {
  width: 100%;
  height: auto;
}

Broken card result

unexpected image gap
Product card The tiny dark line makes the whole card feel less polished.

Correct card pattern

Clean card media 
.card {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
}

Fixed card result

gap removed
Product card The media area now sits cleanly against the card content.
Error 4

The image must stay inline, but baseline alignment is still wrong

Sometimes an image really does need to remain inline with text, icons, badges, emoji-like graphics, or small UI media. In that case, display:block may not be the right fix. Instead, use vertical-align to control the inline alignment.

Baseline default

Inline alignment 
.inline-thumb {
  display: inline-block;
  vertical-align: baseline;
}

Inline element aligned to baseline

Text before text after

The visual may feel slightly low or leave awkward space depending on the surrounding text.

Better inline alignment

Bottom aligned 
.inline-thumb {
  display: inline-block;
  vertical-align: bottom;
}

Inline element aligned more cleanly

Text before text after

This keeps the element inline but changes how it sits against the text line.

Error 5

You fixed the image gap but forgot responsive image safety

Once you fix the tiny baseline gap, do not stop there. Most real image layouts also need a safe responsive image reset. Without max-width:100% and height:auto, images can create width and overflow problems on smaller screens.

Incomplete reset

Only fixes gap 
img {
  display: block;
}

Better reusable reset

Gap + responsive safety 
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Why this matters

The image gap bug is a spacing issue. Responsive image overflow is a width issue. They are different bugs, but they often appear in the same card, gallery, hero, or article layout.

Fast practical rule

If there is a tiny gap under an image and no margin or padding explains it, add display:block to the image. If that removes the gap, the issue was inline baseline spacing. For inline images that must stay inline, use vertical-align:bottom or vertical-align:middle.

Best default image pattern for real layouts

In production CSS, many teams use a small image reset because images inside cards, articles, product grids, and responsive layouts usually need predictable behavior. This does not mean every image must always be block-level, but it is a strong default for layout images.

If an image is part of the structure of a card, section, hero, thumbnail, gallery, or figure, display:block usually makes the layout easier to control.

Recommended global image reset

Production default 
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

Figure with caption pattern

Article images 
<figure class="media">
  <img src="layout.jpg" alt="Layout example">
  <figcaption>Example caption</figcaption>
</figure>
.media img {
  display: block;
  width: 100%;
  height: auto;
}

.media figcaption {
  padding: 12px 16px;
}

Why captions should not depend on accidental spacing

A caption should have intentional spacing from your CSS. It should not be separated from the image because the browser happened to reserve baseline descender space.

Making the image block-level gives you full control: the image ends where it should, and the caption spacing comes from figcaption, not from hidden inline behavior.

Debug checklist

  • Inspect the image and wrapper to confirm there is no obvious margin or padding creating the gap.
  • Check whether the gap is small, directly under the image, and the same color as the parent background.
  • Add display:block to the image and retest.
  • If the image must remain inline, try vertical-align:bottom or vertical-align:middle.
  • Check the parent line-height if the image is mixed with text.
  • Use max-width:100% and height:auto for responsive image safety.
  • For cards, make the media image block-level before adjusting card padding or wrapper height.
  • For figures, control caption spacing with figcaption padding or margin, not accidental baseline space.
Best first move Add display:block to the image.
Most common false fix Removing random padding, margin, or height from the wrapper.
Most overlooked cause Images are inline by default, even when they visually look like layout blocks.
Better mindset A tiny image gap is usually a line-box behavior, not a broken card.

Related fixes that can help

If the image gap is part of a bigger layout issue, these FrontFixer guides are the next places to check.

Why is my image stretching or squashed in CSS? If the image gap appears together with distorted, squeezed, or badly cropped images. Read this fix
Fix overflow causing horizontal scroll If images or wrappers are making the page wider than the screen. Read this fix
Fix container width problems If the image sits inside a wrapper that feels too wide, too narrow, or misaligned. Read this fix

Final takeaway

Gap under image CSS bugs usually happen because the image is still inline by default. Inline content sits on a text baseline, and the browser reserves a little room below that baseline for descenders. That small reserved area is the mysterious strip you see under the image.

The fastest fix is usually display:block. For layout images inside cards, figures, banners, galleries, and responsive components, combine it with max-width:100% and height:auto. Once you understand that the gap is baseline spacing, this bug becomes simple instead of mysterious.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.

Browse All Fixes Explore CSS Fixes

Why Is My Image Stretching or Squashed in CSS?

by

Image Layout Fix

Why is my image stretching in CSS?

Why is my image stretching in CSS? Most of the time, the image file is not the problem. The real issue is that the container has one shape, the image has another shape, and your CSS is forcing both width and height in a way that destroys the original proportion.

Browse All Fixes See the Difference
  • Very common beginner CSS bug
  • Usually caused by forced width + height
  • Fix with object-fit and aspect-ratio

The image problem in one picture

The image below is represented by the same visual content in three states: broken, fixed, and premium. The difference is not the image file. The difference is how the CSS handles the image inside the container.

× Error: stretched image
The image is being forced into a wide, short box. It fills the space, but the proportion is destroyed.
✓ Better: object-fit cover
The image keeps its proportion. The browser crops extra parts instead of squashing the photo.
★ Premium: stable media card
Responsive image card

A stable image ratio, clean crop, and predictable layout across screen sizes.

What the bug looks like

The image looks normal in the file, but inside the website it becomes stretched sideways, squeezed vertically, too tall, too flat, or distorted inside a card.

Why it happens

The browser is trying to obey your CSS box. If you force the image into a shape that does not match its natural proportion, distortion can happen.

What usually fixes it

Use object-fit, set a stable aspect-ratio, and avoid forcing images to obey both width and height without a fitting strategy.

Why images stretch even when the file is fine

Every image has a natural shape. A landscape image may be 1600×900. A portrait image may be 900×1200. A square image may be 1000×1000. That natural relationship between width and height is the image’s aspect ratio.

The problem starts when your CSS forces the image into a container with a different shape. A wide banner, a square card, or a short product tile may ask the browser to make the image fit a box that does not match the original file.

This is why image stretching often appears inside cards, CSS Grid layouts, Flexbox rows, and responsive sections. If the surrounding layout is also unstable, check related FrontFixer guides like Fix CSS Grid Breaking on Mobile and Fix container width problems.

The simple mental model

The image has a natural shape The file already has a width-to-height relationship before your CSS touches it.
The container has a layout shape Your card, hero, grid item, or banner creates a visual box on the page.
Distortion happens when the two fight If CSS forces the image to fill a mismatched box without object-fit, the image may stretch.

Common broken version

Distorts the image 
.card img {
  width: 100%;
  height: 220px;
}

Why this fails

This code tells the image to become exactly as wide as the card and exactly 220px tall. But it does not tell the browser how to preserve the image’s original proportion.

So the browser may squeeze or stretch the image until it fits the box. The result can look like a photo was pulled sideways or flattened from the top.

This is not a mysterious browser bug. It is usually a missing fitting rule.

Recommended baseline fix

Object-fit cover

For most cards, thumbnails, hero images, and visual previews, this is the clean baseline pattern. 

.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Visual example: error

Bad CSS
The image fills the area, but it has been flattened. This is what happens when CSS forces dimensions without a fitting rule.

The CSS that causes it

Forced dimensions 
.hero-image img {
  width: 100%;
  height: 180px;
}

The better version

Keeps proportion 
.hero-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Visual example: improved

Better CSS
The image now keeps its natural proportion. The browser crops the extra area instead of stretching the image.

object-fit: cover vs object-fit: contain

This is where many tutorials stop too early. They say “use object-fit” but do not explain which value to use.

Use object-fit: cover when the image should fill the container, even if the browser has to crop a little. This is common for cards, hero sections, thumbnails, blog previews, and product grids.

Use object-fit: contain when the full image must remain visible, even if empty space appears around it. This is common for logos, product photos, diagrams, icons, and screenshots.

CSS value What it does Best use case
object-fit: cover Fills the container while preserving image proportion. Some parts may be cropped. Cards, thumbnails, hero images, previews, blog images.
object-fit: contain Keeps the entire image visible. Empty space may appear inside the container. Logos, product shots, screenshots, diagrams, UI images.
object-fit: fill Forces the image to fill the box even if it distorts the image. Rarely ideal. This is often the cause of the stretching problem.
object-fit: none Keeps the image’s original size and may crop the image inside the box. Special cases where you intentionally control visible image position.

Fast practical rule

If the image is decorative or part of a card layout, start with object-fit: cover. If the image contains important information that must not be cut off, start with object-fit: contain.

Premium version

Production pattern
Stable responsive media card

The media area keeps a predictable ratio, the image does not distort, and the layout remains clean across desktop and mobile.

Premium card pattern

Reusable component 
.feature-card {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.feature-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

When aspect-ratio is the missing piece

object-fit tells the image how to behave inside the box. But aspect-ratio helps define the shape of the box itself.

Without a stable media ratio, cards in a grid may jump around, images may become different heights, and responsive layouts may feel messy. This is especially common in CSS Grid and Flexbox layouts where content changes from card to card.

If your image bug appears only when cards wrap or columns change, the issue may overlap with Fix Flexbox not centering or Fix responsive design not working.

Stable media ratio

Less layout shift 
.post-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Use cover for visual consistency

If all cards need the same clean shape, cover is usually the best choice because it fills the frame and avoids distortion.

Use contain for important full images

If cropping would remove important information, like text in a screenshot or a product detail, use contain.

Use display:block on images

This also avoids the classic inline-image baseline gap, which can create a mysterious space under images.

Logo or screenshot pattern

Object-fit contain 
.logo-box {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #f8fafc;
}

.logo-box img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

Why contain is better for logos

A logo should usually never be cropped. If you use cover on a logo, part of the mark or text may disappear. If you force width and height, the logo may stretch and look unprofessional.

For logos, screenshots, diagrams, and UI examples, contain is often safer because it keeps the full image visible.

Debug checklist

  • Check whether the image has both width and height forced.
  • Inspect the container size and see whether its ratio matches the image ratio.
  • Add object-fit: cover when the image should fill the container.
  • Add object-fit: contain when the full image must remain visible.
  • Use aspect-ratio on the media wrapper to create stable cards.
  • Add display:block to images to avoid baseline spacing issues.
  • Test the image inside mobile breakpoints, not only on desktop.
  • Check whether CSS Grid or Flexbox is changing the card width unexpectedly.
  • Avoid using random fixed heights unless the image has a clear fitting strategy.
  • Use DevTools to compare the image’s rendered size with its natural size.
Best first move Wrap the image in a media container, set an aspect ratio, then use object-fit on the image.
Most common false fix Cropping the image manually in an editor instead of fixing the CSS behavior.
Most overlooked cause A responsive container changes shape on mobile, and the image is forced to follow it.
Better mindset Do not ask only “what size should the image be?” Ask “how should this image fit inside this box?”

Common mistakes that make images look distorted

Mistake Why it breaks Better fix
Using fixed width and fixed height directly on the image The image may be forced into a shape that does not match its natural ratio. Use a wrapper with aspect-ratio and apply object-fit to the image.
Using height:100% without a controlled parent height The browser may calculate a height you did not expect or stretch the image inside a strange container. Define the media wrapper clearly, then make the image fill that wrapper.
Using object-fit: fill fill can distort the image because it forces both dimensions. Use cover or contain depending on whether cropping is acceptable.
Forgetting mobile breakpoints A card that works on desktop may become too narrow or tall on mobile. Test the image container at mobile widths and adjust aspect ratio when needed.
Using the same rule for photos, logos, and screenshots Different image types need different fitting behavior. Use cover for photos and previews; use contain for logos and screenshots.

Related fixes that can help

If your image stretching problem is connected to a bigger layout issue, these FrontFixer guides are the next places to check.

Fix CSS Grid Breaking on Mobile If your images stretch only when grid columns collapse or change width. Read this fix
Fix container width problems If the image looks wrong because the parent container is too wide, too narrow, or unstable. Read this fix
Fix overflow causing horizontal scroll If images are also creating sideways scrolling on mobile. Read this fix

Final takeaway

Why is my image stretching in CSS? Usually because the browser is being forced to make an image fit a box with the wrong proportion. The image file is fine. The fitting strategy is missing.

Start with a media wrapper, give that wrapper a stable aspect-ratio, and use object-fit: cover or object-fit: contain depending on whether the image should crop or remain fully visible. Once you understand the difference, distorted images become one of the easiest front-end bugs to fix.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging real CSS, HTML, and responsive layout problems with practical examples.

Browse All Fixes See the Difference