How to Resize an Image in CSS

Use CSS width and height properties when you need an image to fit a card, hero section, avatar, gallery, or responsive layout. The safest default is to control the width and let the height scale automatically.

What you’ll build or solve

You’ll learn how to resize an image in CSS without stretching it. You’ll also know how to keep the aspect ratio correct across different layouts and screen sizes.

When this approach works best

This approach is the right choice when images appear too large, too small, or inconsistent across a layout.

Common real-world scenarios include:

• Hero banners
• Card thumbnails
• Profile images
• Product galleries
• Blog cover images

This is a bad idea when the image file itself needs permanent editing. In that case, resize the asset before uploading it.

Prerequisites

You only need:

• A basic HTML file with an image
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Set width and keep height automatic

Use width to control the size and height: auto to preserve the aspect ratio.

<img class="hero-image" src="usa-team.jpg" alt="USA team">

<style>
  .hero-image {
    width: 400px;
    height: auto;
  }
</style>

For responsive layouts, use percentage width instead.

<img class="cover-image" src="france-product.jpg" alt="France product">

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

What to look for:

• height: auto prevents stretching
• Fixed pixel width works for controlled components
• Percentage width works better for responsive layouts
• max-width prevents oversized images
• Resize the container too if the layout still feels off

Examples you can copy

Card thumbnail

<img class="card-image" src="uk-course.jpg" alt="UK course">

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

Responsive hero image

<img class="hero" src="usa-hero.jpg" alt="USA pricing">

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

Avatar image

<img class="avatar" src="mentor.jpg" alt="France mentor">

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

Common mistakes and how to fix them

Mistake 1: Setting both width and height with unrelated values

What the reader might do:

.image {
  width: 400px;
  height: 100px;
}

Why it breaks: the image stretches because the proportions no longer match the original file.

Corrected approach:

.image {
  width: 400px;
  height: auto;
}

Mistake 2: Using a fixed width on responsive layouts

What the reader might do:

.hero {
  width: 1200px;
}

Why it breaks: the image can overflow smaller screens.

Corrected approach:

.hero {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

Mistake 3: Forgetting the container width

What the reader might do:

.image {
  width: 100%;
}

Why it breaks: the image may become much larger than intended if the parent container is too wide.

Corrected approach:

.container {
  max-width: 600px;
}

.image {
  width: 100%;
  height: auto;
}

Troubleshooting

If the image looks stretched, switch height to auto.

If the image overflows mobile screens, replace fixed widths with percentages and max-width.

If the image still feels too large, reduce the parent container width.

If avatars need exact squares, set equal width and height.

Quick recap

• Use width to resize images
• Keep height: auto for correct proportions
• Use % and max-width for responsive layouts
• Avoid unrelated width and height values
• Resize the container when needed