How to Resize Images in HTML

The three ways to resize an image in HTML

You can change an image's size in HTML by adding width and height attributes directly to the <img> tag, by using CSS in a <style> block, or by editing the CSS in a separate stylesheet. The simplest method for most people is the first one — adding the size numbers straight into the tag itself.

All three methods work. Which one you choose depends on whether you're resizing a single image, multiple images, or building a larger site where you want to control image sizes from one place. This guide covers all three so you can pick the approach that fits your situation.

Key Takeaways

The fastest way to resize one image is to add width and height attributes directly to the <img> tag: <img src="photo.jpg" width="300" height="200">
You can specify size in pixels (exact numbers) or percentages (relative to the container), and the browser will shrink or stretch the image to fit.
If you set only width or only height, the browser automatically adjusts the other dimension to keep the image from looking stretched or squashed.
CSS in a <style> block or external stylesheet gives you more control and works better when you need to resize many images or change sizes based on screen size.

Adding width and height directly to the image tag

The simplest method is to put the size numbers right into your <img> tag using the width and height attributes. Here's the basic format:

The numbers are in pixels by default. This tells the browser to display the image 300 pixels wide and 200 pixels tall, no matter what the original file size is. If your image is originally 1000 by 800 pixels, the browser will shrink it. If it's 100 by 80 pixels, the browser will enlarge it.

You can also use percentages instead of pixels. <img src="photo.jpg" width="50%"> makes the image take up half the width of its container. This is useful when you want the image to scale with the page or fit inside a column that changes size on different devices.

Setting only width or only height

If you set the width but leave out the height, the browser automatically calculates the height to match the original image's proportions. The same works in reverse — set the height and the width adjusts automatically. This prevents the image from looking stretched or squashed.

<img src="photo.jpg" width="300"> will display the image 300 pixels wide, and if the original is square, it will be 300 pixels tall as well. If the original is wider than it is tall, the height will be less than 300 pixels.

This is the safest approach if you're not sure of the original image's dimensions. You get the size you want in one direction, and the image stays proportional.

Resizing images with CSS in a style block

If you're resizing multiple images or want more control, use CSS. Add a <style> block in the <head> section of your HTML and write rules for your images:

This rule applies to every <img> tag on the page. If you want different sizes for different images, give each image a class or id and write separate rules:

<img src="photo.jpg" class="thumbnail"> <img src="banner.jpg" class="hero"> <style> .thumbnail { width: 150px; height: 150px; } .hero { width: 100%; height: auto; } </style>

The .thumbnail class makes small square images, and the .hero class makes a full-width image that scales with the page. Using height: auto keeps the proportions correct.

Using an external stylesheet for larger projects

If you're building a website with many pages, create a separate CSS file (for example, styles.css) and link it in the <head> of your HTML:

Then write your image sizing rules in that file. This way, you can change image sizes across your entire site from one place. If you decide all your thumbnails should be 200 pixels instead of 150, you edit the CSS file once and every page updates automatically.

External stylesheets also make it easier to write rules that change image sizes based on screen size — for example, making images smaller on phones and larger on desktop. This is called responsive design, and it's the standard approach for modern websites.

Resizing images without distortion

The key to avoiding stretched or squashed images is to set only one dimension and let the browser calculate the other, or to use object-fit in CSS if you need a specific size in both directions.

object-fit: cover; makes the image fill the space without distortion — it crops the image instead of stretching it. object-fit: contain; fits the entire image inside the space, leaving empty space if needed. Here's an example:

.thumbnail { width: 200px; height: 200px; object-fit: cover; }

This creates a 200-by-200 square and crops the image to fit, keeping it proportional. Without object-fit, the image would stretch to fill the square, which usually looks wrong.

Common mistakes and how to avoid them

The most common mistake is setting both width and height to exact numbers when you don't know the original image's proportions. This stretches or squashes the image. If you must set both dimensions, use object-fit: cover or object-fit: contain to keep it looking right.

Another mistake is forgetting that percentages are relative to the container. width: 50% makes the image half as wide as its parent element, not half as wide as the original file. If the parent is only 200 pixels wide, the image will be 100 pixels wide, even if the original is 2000 pixels.

If an image isn't resizing the way you expect, check that your CSS rule is actually targeting the right image. Use the browser's developer tools (usually opened with F12) to inspect the image and see which rules are being applied.

Frequently Asked Questions

What's the difference between width and height attributes versus CSS?

Attributes in the tag are faster for one image and easier to read. CSS is better when you're resizing many images or want to change sizes based on screen size. For a single image on a straightforward page, use attributes. For a website with dozens of images, use CSS.

Should I use pixels or percentages?

Use pixels when you want an exact size that doesn't change. Use percentages when you want the image to scale with the page or fit inside a flexible container. On modern websites, percentages are more common because they work better on phones and tablets.

Why does my image look blurry or pixelated after resizing?

If you're enlarging a small image, it will look blurry because the browser is stretching pixels. The original file is too small. If you're shrinking a large image and it looks pixelated, the browser may not be rendering it smoothly — try adding image-rendering: auto; in CSS.

Can I resize an image without changing its aspect ratio?

Yes. Set only the width or only the height and leave the other as auto. The browser will calculate the missing dimension based on the original proportions. For example, width: 300px; height: auto; always keeps the image proportional.

What does object-fit do?

object-fit controls how an image fills a space when you've set both width and height. cover crops the image to fill the space without distortion. contain fits the whole image inside the space, leaving empty areas if needed. It's useful when you want consistent sizes across many images with different original dimensions.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.