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

Leave a Comment