How to Limit Image Size in HTML and CSS

Direct answer: To let an image shrink on small screens without enlarging a smaller source image, use:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% limits the rendered image to its containing block, while height: auto preserves the intrinsic aspect ratio. This is usually better than width: 100%, which can stretch a small image until it becomes blurry. See MDN’s max-width documentation.

1. Make images responsive without stretching

Put the rule in your stylesheet:

/* Applies to content images, cards, and articles */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

display: block removes the small inline baseline gap that can appear below images. Keep the rule scoped if some images, such as icons, need different behavior:

.article-content img {
  max-width: 100%;
  height: auto;
}

.avatar {
  width: 48px;
  height: 48px;
}

An image with no sizing uses its intrinsic dimensions. When its containing block is narrower, max-width: 100% scales it down. When the container is wider, the image stops at its intrinsic width instead of being enlarged.

Responsive example

<figure class="article-image">
  <img
    src="photo-800.jpg"
    width="800"
    height="533"
    alt="A mountain lake at sunrise">
  <figcaption>Sunrise over the lake.</figcaption>
</figure>

.article-image {
  max-width: 100%;
  margin: 0;
}

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

2. Set a maximum design width

If an image should fill available space but never exceed a design cap, combine width: 100% with max-width:

.hero img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-inline: auto;
}

This fills a narrow container, stops at 640 CSS pixels, and keeps the original aspect ratio. The cap is a design choice; choose it from your layout rather than from a universal value.

To limit height while preserving proportions, add a maximum height and keep the width automatic:

.portrait {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
}

When both dimensions are constrained, the browser preserves the ratio only if at least one dimension remains automatic. For a precise rectangular area, use object-fit.

3. Fit an image inside a fixed box

Use explicit box dimensions when every card must have the same visual size:

.card-image {
  width: 320px;
  height: 180px;
  object-fit: contain;
  background: #f3f4f6;
}

`object-fit`	Behavior	Use it when
`contain`	Preserves the aspect ratio and shows the entire image. Empty space may remain.	Nothing may be cropped, such as product artwork or diagrams.
`cover`	Preserves the aspect ratio and fills the box. Edges may be clipped.	You need uniform cards or thumbnails.
`fill`	Fills both dimensions and can distort the image.	Stretching is intentional.
`none`	Leaves the replaced content at its unscaled size.	You need the source size inside an overflow-controlled box.
`scale-down`	Chooses the smaller result of `none` and `contain`.	The image should never be enlarged.

For a focal point when cropping, set object-position:

.card-image {
  width: 320px;
  height: 180px;
  object-fit: cover;
  object-position: 50% 20%;
}

object-fit applies to replaced elements such as <img> and <video>. It does not apply to iframes, embeds, or fenced frames. See MDN’s object-fit reference.

4. Reserve space and choose an appropriate download

CSS controls the rendered size. It does not automatically reduce the bytes downloaded. Add accurate HTML dimensions so the browser can calculate the aspect ratio and reserve space before the file arrives:

<img
  src="photo-800.jpg"
  width="800"
  height="533"
  alt="Description of the photograph">

For different viewport sizes, provide responsive candidates with srcset and describe the intended display width with sizes:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, 640px"
  width="1600"
  height="1067"
  alt="A mountain lake at sunrise">

With width descriptors, the browser uses sizes and the candidate widths to select a suitable resource. Keep the CSS rule as well:

img {
  max-width: 100%;
  height: auto;
}

These mechanisms solve related but different problems: CSS limits the displayed dimensions, while srcset and sizes help limit the downloaded resource.

Images in flex and grid layouts

Flex and grid items can refuse to shrink because their automatic minimum size is based on their contents. If an image still causes horizontal overflow, constrain the item:

.layout {
  display: flex;
  gap: 1rem;
}

.layout__media {
  min-width: 0;
  flex: 1 1 0;
}

.layout__media img {
  max-width: 100%;
  height: auto;
}

For grid, minmax(0, 1fr) prevents a column from expanding beyond the grid:

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

5. Check reflow and accessibility

Images should remain usable at narrow widths and high zoom. W3C Technique C37 targets layouts that work at a width equivalent to 320 CSS pixels and recommends maximum-width and automatic-height behavior. Test the page at 400% zoom and at a narrow viewport; the image should not create horizontal scrolling.

Give informative images meaningful alt text.
Use alt="" for purely decorative images.
Keep accurate width and height attributes to reduce layout shift.
Do not use CSS cropping to hide information users need to understand.
Check the focal point when object-fit: cover removes edges.

Read W3C Technique C37 for the reflow objective and test procedure.

6. Performance: rendered size is not file size

A 400-pixel rendering can still download a multi-megapixel original. MDN explicitly warns against loading very large images and scaling them down in the browser. Generate appropriately sized variants, use a CDN transformation, or use an image optimization service when originals exceed the largest display size.

Choose source variants near the largest rendered width.
Compress and encode images in suitable formats.
Use srcset and sizes for responsive downloads.
Reserve dimensions to avoid layout shifts.
Lazy-load below-the-fold images when it fits the page’s loading strategy.

CSS alone cannot reduce transfer bytes or fix a slow origin.

7. Troubleshooting checklist

Symptom	Likely cause	Fix
Image is stretched	Both width and height are forced, or `object-fit: fill` is active.	Use `height: auto`, or set `object-fit: contain` or `cover`.
Small image becomes blurry	`width: 100%` enlarges it beyond its intrinsic size.	Use `max-width: 100%` or `object-fit: scale-down`.
Image overflows its card	The image or a flex/grid item has an automatic minimum size.	Set `max-width: 100%`; add `min-width: 0` to the flex item or `minmax(0, 1fr)` to the grid track.
Blank bars appear	`object-fit: contain` preserves the ratio inside a different-ratio box.	Accept the letterboxing, change the box ratio, or use `cover` if cropping is acceptable.
Important content is cut off	`object-fit: cover` crops the source.	Use `contain` or adjust `object-position`.
Layout jumps while loading	Intrinsic dimensions were not declared.	Add accurate `width` and `height` attributes or an equivalent aspect ratio.
Page is slow despite a small display size	The browser downloads an oversized original.	Create responsive variants and connect them with `srcset` and `sizes`.
Image rule has no effect	A more specific selector or inline style overrides it.	Inspect computed styles, then fix selector specificity or the source rule.

8. Or skip the browser setup

If your goal is to produce screenshots of pages that contain responsive images, ScreenshotNeo captures the rendered result through one request. The ScreenshotNeo API documentation lists the available options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account.

9. FAQ

Should I use `width: 100%` or `max-width: 100%`?

Use max-width: 100% when the image must shrink but should not grow beyond its intrinsic width. Add width: 100% when it should fill available space up to a separate max-width cap.

How do I stop an image from changing ratio?

Use height: auto for normal responsive images. In a fixed box, use object-fit: contain or cover.

Does CSS resizing save bandwidth?

No. CSS changes the rendered dimensions. Use appropriately sized files, srcset, and sizes to control downloads.

Can `object-fit` resize an iframe?

No. It applies to replaced elements such as images and videos, not iframes or embeds.