To change an image’s displayed size in HTML, set its width and height attributes or use CSS. For most responsive pages, use an accurate intrinsic width and height on the <img> element, then constrain it with max-width: 100%; height: auto;. That lets the image shrink to fit its container while preserving its proportions.
Choose the sizing behavior you actually need
“Change image size” can mean several different things. Decide whether the image should have a fixed pixel size, scale fluidly, fill a box by cropping, show the entire image with unused space, or stretch to match a box. The correct HTML and CSS differ for each case.
| Goal | Recommended approach | Preserves proportions? | What happens to excess space or pixels? |
|---|---|---|---|
| Known, fixed display dimensions | HTML width and height, or CSS dimensions |
Yes, if the ratio matches the source | None when dimensions match |
| Resize one dimension proportionally | Set one CSS dimension and the other to auto |
Yes | None |
| Responsive image in a column | max-width: 100%; height: auto; |
Yes | It shrinks when the container is narrower |
| Fill a fixed card or thumbnail | Fixed box dimensions with object-fit: cover |
Yes | Edges are cropped |
| Show the complete image in a fixed box | object-fit: contain |
Yes | Bars or empty space may appear |
| Force every pixel into a box | object-fit: fill |
No, when ratios differ | The image can look stretched |
Set a fixed image size with HTML
The simplest method is to add width and height to the image element. Their values are unitless integer pixel values; do not write 800px in the attributes.
<img src="photo.jpg" alt="Mountain lake at sunrise" width="800" height="600">Use the source file’s actual dimensions, or another pair with the same aspect ratio, whenever possible. Supplying both values lets the browser calculate the aspect ratio and reserve the right amount of space before the file finishes loading. That reduces content movement during page load.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
These attributes describe the image’s intrinsic dimensions and provide useful layout information. CSS can still change the rendered size later.
Resize with CSS while keeping the aspect ratio
To display an image at 300 pixels wide without stretching it, set the width and leave the height at auto:
.article-image {
width: 300px;
height: auto;
}
<img class="article-image" src="photo.jpg" alt="Mountain lake at sunrise" width="1600" height="1200">The browser computes the height from the image’s original ratio. The same pattern works with percentages, rem, em, or other CSS length units. Avoid setting unrelated width and height values unless cropping or distortion is intentional.
Make an image responsive
A common responsive rule is:
img {
max-width: 100%;
height: auto;
}
max-width: 100% prevents the image from becoming wider than its containing block. height: auto keeps its proportions as it scales down. The image can remain smaller than the container if its own width is smaller, but it will not overflow a narrow mobile column.
Keep intrinsic dimensions on the element as well:
<figure class="hero">
<img
src="hero-1600.jpg"
alt="A city skyline after rain"
width="1600"
height="900"
>
</figure>
.hero img {
display: block;
max-width: 100%;
height: auto;
}
display: block removes the small inline baseline gap that can otherwise appear below an image. It is optional for sizing, but useful in figure, card, and gallery layouts.
Fit an image into a fixed box
Thumbnails, avatars, and card covers often need identical boxes even when source images have different proportions. Give the image a box size, then choose an object-fit mode.
Crop to fill with cover
.card-thumb {
width: 320px;
height: 180px;
object-fit: cover;
object-position: center;
}
cover scales the image until the whole box is filled, then clips the parts outside the box. Change object-position to keep a subject visible, for example object-position: top for portraits where the face is near the top.
Show everything with contain
.product-image {
width: 320px;
height: 180px;
object-fit: contain;
background: #f2f2f2;
}
contain keeps the complete image and preserves its ratio. If the ratios differ, the unused part of the box remains visible. A background color can make that space look deliberate.
Understand fill, none, and scale-down
fillis the default behavior for replaced elements and can distort an image to match both dimensions.nonekeeps the image at its natural size, which can overflow or be clipped by its container.scale-downbehaves like whichever ofnoneorcontainproduces the smaller rendered size.
The object-fit feature is broadly available across browsers, with MDN describing it as available since January 2020.
Use srcset and sizes for different files
CSS controls the rendered box; it does not by itself choose the most efficient source file. When you have multiple versions of an image, srcset supplies candidates and sizes tells the browser how wide the image will probably be in the layout.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="1600"
height="1200"
alt="A forest path in autumn"
>
In this example, the browser chooses a suitable candidate for the available slot and display density. The sizes value should describe your actual layout: 100vw means the slot is approximately the viewport width, while 800px describes a capped desktop column. Keep CSS sizing rules; responsive-image selection and layout sizing solve different problems.
Common patterns you can copy
Fixed 640-pixel image
<img src="diagram.png" alt="Network diagram" width="640" height="360">Fluid image capped by a content column
.content img {
width: 100%;
max-width: 900px;
height: auto;
}
Square avatar without distortion
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
}
Responsive hero with a focal point
.hero-image {
width: 100%;
height: clamp(220px, 45vw, 520px);
object-fit: cover;
object-position: 50% 30%;
}
Debug sizing problems
The image is stretched
- Check whether CSS sets both dimensions to values with a different ratio from the source.
- Set the changed dimension and use
height: autoorwidth: auto. - If a fixed box is required, use
object-fit: coverorcontaininstead offill.
The image overflows on mobile
- Apply
max-width: 100%to the image. - Check parent padding, borders, and fixed widths; the available content width may be smaller than expected.
- Look for a more specific selector overriding your responsive rule.
There is a blank gap below the image
Inline images align to the text baseline by default. Set display: block, or adjust vertical alignment if the image must remain inline.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The layout jumps while the image loads
Add accurate width and height attributes, or otherwise reserve an aspect-ratio box. Do not use invented dimensions that conflict with the real file ratio.
The thumbnail shows the wrong part of the picture
With object-fit: cover, adjust object-position. Values such as center top, left center, or percentages let you move the crop’s focal point.
The browser downloads an unexpectedly large file
Inspect the srcset candidates and sizes declaration. A slot incorrectly described as 100vw can make the browser select a much larger file than a narrow content column needs.
Performance and accessibility considerations
- Use dimensions that reflect the source image’s real ratio so layout space is reserved accurately.
- Write meaningful
alttext when the image conveys information. Use an emptyalt=""only for decorative images. - CSS resizing changes display size, not necessarily download size. Generate appropriately sized files and offer them with
srcsetwhen several candidates are available. - Do not use CSS to hide an image and assume that prevents its download; source selection and loading behavior are separate concerns.
- For fixed cards, choose
coveronly when losing edge content is acceptable. Usecontainfor diagrams, product details, screenshots, and other images where every part matters.
Or skip the browser setup
If you need a clean screenshot of a resized page rather than a hand-built browser workflow, ScreenshotNeo takes a URL and returns a PNG, JPEG, WebP, or PDF. It accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
One GET request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the complete parameter list and output details in the ScreenshotNeo documentation. Python and Node.js examples are ready to run with your own key:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Every feature is on every plan: 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Frequently Asked Questions
Should I use HTML attributes or CSS for image dimensions?
Use both when appropriate: accurate HTML attributes reserve space and communicate intrinsic dimensions, while CSS controls the responsive rendered size.
Can I change an image’s size without editing the original file?
Yes. HTML and CSS change the displayed dimensions. They do not create a smaller downloaded file; use multiple source files with srcset when transfer size matters.
Which object-fit value keeps an entire image visible?
Use object-fit: contain. It preserves the ratio and may leave unused space inside the fixed box.
Why does width: 100% make my image blurry?
The browser may be enlarging a source file beyond its native resolution. Provide a larger candidate or use srcset so the browser can select an appropriate file.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
