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

Leave a Comment