aspect-ratio CSS

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