The Three Ways to Resize an Image in HTML
You can change an image's display size in HTML using the width and height attributes directly in the tag, by writing CSS rules in a style attribute, or by linking to a separate CSS file. The simplest method for a single image is to add width and height to the <img> tag itself. The most flexible method for controlling many images at once is CSS, which lets you set rules that explore to groups of images or change their size based on screen width.
All three methods work in every browser. The choice depends on whether you are resizing one image, a few images, or many — and whether you want the image to shrink on mobile phones or stay the same size everywhere.
Key Takeaways
- Add width="400" and height="300" directly to your <img> tag to set a fixed size in pixels.
- Use style="width: 50%; height: auto;" in the tag to make an image scale to half its container's width while keeping its original proportions.
- Write CSS rules in a <style> block or external file to resize all images with a certain class or ID at once.
- Always set height: auto; when you specify only width, so the image does not stretch or squash.
- Test your images on phones and tablets to make sure they look right at smaller screen sizes.
Using Width and Height Attributes in the Tag
The most direct way to resize a single image is to add width and height attributes to the <img> tag. Both values are in pixels by default. This code makes an image 400 pixels wide and 300 pixels tall:
<img src="photo.jpg" width="400" height="300" alt="Description">
If you know only one dimension and want the other to scale automatically, you can omit the second attribute. This code sets width to 400 pixels and lets the height adjust to keep the image's original shape:
<img src="photo.jpg" width="400" alt="Description">
This method works fast for one or two images, but if you have ten images and need to change them all to 500 pixels wide, you have to edit each tag separately. That is when CSS becomes useful.
Resizing with CSS in a Style Attribute
You can write CSS rules directly in the style attribute of an <img> tag. This approach is useful when you want one image to behave differently from others on the page. This code makes an image 60 percent of its container's width and keeps its proportions:
<img src="photo.jpg" style="width: 60%; height: auto;" alt="Description">
Using a percentage instead of pixels means the image will shrink on a phone and grow on a desktop monitor. The height: auto; part is important — it tells the browser to calculate the height based on the width so the image does not look stretched or squashed.
You can also use other units: em (relative to text size), rem (relative to the root text size), or vw (relative to the browser window width). For most cases, percentages and pixels are the clearest choice.
Using CSS Rules for Multiple Images
When you have many images to resize, write CSS rules in a <style> block in your page's <head> section or in a separate CSS file. This code resizes all images with the class thumbnail to 200 pixels wide:
.thumbnail { width: 200px; height: auto; }
Then add the class name to each image tag:
<img src="photo1.jpg" class="thumbnail" alt="Description"><img src="photo2.jpg" class="thumbnail" alt="Description">
You can also target all images on a page at once with the img selector, or use an ID for a single special image. CSS rules are easier to update later — change the rule once and every image using that class or ID changes automatically.
Making Images Responsive on Different Screen Sizes
A responsive image shrinks on phones and tablets but stays larger on desktop screens. The simplest way is to set width as a percentage and height as auto, which you saw above. A more powerful method uses max-width to set a ceiling so the image never gets too large:
img { max-width: 100%; height: auto; }
This rule makes every image on your page fit inside its container without stretching beyond the container's edges. On a phone, the image will be as wide as the phone screen. On a desktop, it will be as wide as the column it sits in.
For fine control over different screen sizes, use media queries in CSS. This code makes images 100 percent wide on phones but only 50 percent wide on larger screens:
@media (max-width: 600px) { img { width: 100%; } }@media (min-width: 601px) { img { width: 50%; } }
Common Mistakes and How to Fix Them
The most common error is setting both width and height to fixed pixel values when the image's original proportions are different. If your image is 800 by 600 pixels and you set width to 400 and height to 300, it will look correct. But if you set width to 400 and height to 400, the image will look stretched or squashed. Always use height: auto; unless you have a specific reason to set both dimensions.
Another mistake is forgetting to set a width on a container when using percentage widths. If an image is set to width: 50%; but its container has no defined width, the browser may not know what 50 percent means. Make sure the parent element (the <div> or other container holding the image) has a width set.
A third issue is using very large pixel values that make images too big to fit on phones. Test your page on a mobile device or use your browser's mobile view tool to see how images look at smaller sizes. If they overflow the screen, switch to percentage widths or use max-width.
Comparing the Three Methods
| Method | Best For | How It Works |
|---|---|---|
| Width and height attributes | One or two images with fixed sizes | Add width="400" height="300" to the tag |
| Style attribute | One image that needs different rules than others | Add style="width: 60%; height: auto;" to the tag |
| CSS class or ID | Many images that should look the same | Write a rule like .photo { width: 300px; } and add class="photo" to each tag |
| CSS with max-width | Images that need to fit any screen size | Use max-width: 100%; height: auto; to scale down but not up |
Frequently Asked Questions
What happens if I set width but not height?
The browser will calculate the height automatically to keep the image's original shape. This is the safest approach. If you do not set height at all, the image will scale proportionally as the width changes.
Can I use percentages instead of pixels?
Yes. Percentages are useful because they make images responsive — they shrink and grow with the screen size. A width of 50 percent means the image will be half as wide as its container, whether the container is 800 pixels or 400 pixels.
How do I make an image smaller without stretching it?
Set only the width and use height: auto;, or set only the height and use width: auto;. The browser will scale the other dimension to match the image's original proportions. Never set both width and height to different ratios than the original image.
What is the difference between width and max-width?
Width sets an exact size. Max-width sets a ceiling — the image will never be larger than that value, but it can be smaller. Max-width is better for responsive design because it prevents images from becoming too large on big screens while still letting them shrink on phones.
Do I need to use CSS or can I just use HTML attributes?
HTML attributes work fine for straightforward cases, but CSS is more powerful and easier to maintain. If you have many images or want them to respond to different screen sizes, CSS is the better choice. For a single image with a fixed size, HTML attributes are simpler.