How to Resize an Image in HTML

What you’ll build or solve

You’ll resize an image on a web page so it fits your layout without looking stretched.

When this approach works best

This approach works best when you want to change how large an image appears on the page using HTML and CSS.

Use it when you:

• Make a logo smaller in a header without editing the image file.
• Give product photos a consistent display width in cards.
• Prevent large images from overflowing on mobile.

Skip this approach when:

• You need a smaller file size for faster loading. Resize or compress the actual image file too.
• You need to crop images into fixed boxes. Resizing changes display size, cropping changes what part of the image is visible.

Prerequisites

• A text editor and a browser.
• An HTML page with an <img> element.
• Basic CSS comfort, inline styles, a <style> tag, or an external stylesheet.

Step-by-step instructions

Step 1: Resize with HTML attributes for quick control

Use width and height attributes when you want a fast change. To avoid distortion, set only one dimension so the browser keeps the aspect ratio.

<imgsrc="images/logo.png"alt="Mimo logo"width="160">

If you set both width and height, match the image’s original proportions or the image can look squished.

<imgsrc="images/logo.png"alt="Mimo logo"width="160"height="40">

What to look for:

• If the image looks stretched, remove either width or height and set only one.

Step 2: Resize with CSS for responsive layouts

CSS gives you better control across devices and works well when your layout changes.

Option A: Scale down to fit the container (most common)

This prevents overflow while keeping the original aspect ratio.

<imgclass="photo"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .photo {
    max-width:100%;
    height:auto;
  }
</style>

Option B: Set a fixed display width while keeping the ratio

This is useful for consistent card layouts.

<imgclass="card-image"src="images/shoes.jpg"alt="Black running shoes">

<style>
  .card-image {
    width:240px;
    height:auto;
  }
</style>

Option C: Combine a preferred width with responsive shrinking

This keeps your target size on larger screens, but prevents overflow on smaller ones.

<imgclass="card-image"src="images/shoes.jpg"alt="Black running shoes">

<style>
  .card-image {
    width:240px;
    max-width:100%;
    height:auto;
  }
</style>

What to look for:

• If the image overflows on mobile, add max-width: 100%.
• If the image becomes too small inside a wide layout, remove max-width and use a fixed width instead.

Examples you can copy

Example 1: Make a logo smaller in a header

<headerclass="site-header">
<imgclass="logo"src="images/logo.png"alt="Mimo logo">
</header>

<style>
  .logo {
    width:140px;
    height:auto;
    display:block;
  }
</style>

Example 2: Responsive image that never overflows on mobile

<imgclass="article-image"src="images/workspace.jpg"alt="Laptop on a desk with a notebook">

<style>
  .article-image {
    max-width:100%;
    height:auto;
    display:block;
  }
</style>

Example 3: Uniform thumbnails for a simple gallery (cropping to fit)

Sometimes you want every thumbnail to be the same size. That’s cropping to a fixed box, not pure resizing, but it’s a common gallery pattern.

<divclass="gallery">
<imgsrc="images/item-1.jpg"alt="Handmade ceramic bowl">
<imgsrc="images/item-2.jpg"alt="Clay vase with a matte glaze">
<imgsrc="images/item-3.jpg"alt="Small plate with a painted sun motif">
</div>

<style>
  .gallery {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }

  .galleryimg {
    width:180px;
    height:120px;
    object-fit:cover;
    display:block;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Setting both width and height and stretching the image

What you might do:

<imgsrc="images/shoes.jpg"alt="Black running shoes"width="300"height="300">

Why it breaks:

If the original image isn’t square, forcing a square size distorts it.

Correct approach:

Set one dimension only, or use CSS with height: auto.

<imgsrc="images/shoes.jpg"alt="Black running shoes"width="300">

Mistake 2: Using a fixed width that breaks on small screens

What you might do:

<imgclass="hero"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .hero {
    width:1200px;
  }
</style>

Why it breaks:

The image can overflow its container on smaller screens.

Correct approach:

Keep your preferred width, but allow shrinking.

<imgclass="hero"src="images/mountains.webp"alt="A mountain trail at sunrise">

<style>
  .hero {
    width:1200px;
    max-width:100%;
    height:auto;
    display:block;
  }
</style>

Mistake 3: Resizing an image past its original size

What you might do:

<imgclass="avatar"src="images/avatar.png"alt="Profile photo">

<style>
  .avatar {
    width:600px;
    height:auto;
  }
</style>

Why it breaks:

Scaling up can make the image look blurry because you’re stretching the pixels.

Correct approach:

Use a larger source image, or keep the display size closer to the original.

<imgclass="avatar"src="images/avatar.png"alt="Profile photo">

<style>
  .avatar {
    width:200px;
    height:auto;
  }
</style>

Troubleshooting

• If the image looks stretched, set only one dimension and use height: auto.
• If the image overflows on mobile, add max-width: 100%.
• If CSS changes don’t apply, check for a more specific selector overriding your rule.
• If the image looks blurry, you may be scaling it up past its original size. Use a higher-resolution source.
• If the image has lots of empty space around it, the padding may be part of the image file, not CSS.

Quick recap

• Use the width attribute alone for quick resizing without distortion.
• Use CSS max-width: 100% and height: auto to resize responsively.
• Use CSS width for consistent sizing in layouts like cards.
• Combine width and max-width to keep a preferred size without overflow.
• If resizing looks wrong, check for distortion, overflow, or scaling beyond the image’s original size.