CSS: How to Resize an Image

Images are a vital part of any website — they enhance content, tell stories, and engage users. But to make sure your site looks great across devices, it’s important to resize images using CSS.

In this blog post, you’ll learn how to resize images in different ways using CSS — with real examples and best practices.

Table of Contents

✅ Why Resize Images with CSS?

Resizing images with CSS allows you to:

Fit images perfectly into your layout
Maintain responsive design
Improve user experience across all devices

🧰 1. Resize Using `width` and `height`

The simplest way to resize an image is by setting its width and height.

Example:

<img src="images/photo.jpg" alt="Scenery" class="resize-img">

.resize-img {
  width: 300px;
  height: 200px;
}

✅ This sets the image to 300px wide and 200px tall.

📏 2. Resize by Width Only (Auto Height)

Let the browser automatically maintain aspect ratio.

.resize-img {
  width: 100%;
  height: auto;
}

This is perfect for making an image responsive to its container.

📱 3. Responsive Image (with Percentage)

img {
  max-width: 100%;
  height: auto;
}

✅ This keeps the image from stretching beyond its container and maintains its original aspect ratio.

🔳 4. Resize Inside a Container

Sometimes you want an image to fill a div or section:

<div class="image-box">
  <img src="images/product.jpg" alt="Product">
</div>

.image-box {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🔍 `object-fit` Options:

cover: Fill the container, crop if needed
contain: Fit the image without cropping
fill: Stretch image to fill, might distort

📐 5. Resize with `transform: scale()`

For hover effects or animations:

img:hover {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}

🔍 This scales the image up by 10% on hover without changing the layout.

⚠️ Image Quality Tip

While CSS can resize images visually, it does not reduce file size. For faster loading:

Use image optimization tools
Export appropriately sized images from Photoshop or other design tools

✅ Summary Table

Task	CSS Code
Fixed size	`width: 300px; height: 200px;`
Auto resize (keep ratio)	`width: 100%; height: auto;`
Responsive scaling	`max-width: 100%; height: auto;`
Fit in a box	`object-fit: cover;`
Resize on hover	`transform: scale(1.1);`

🎯 Conclusion

Resizing images with CSS is simple, powerful, and essential for building modern, responsive websites. Whether you’re creating a full-screen banner or styling product thumbnails, CSS gives you the tools to control image display without distortion.

Combine width, height, and object-fit properties to create flexible, elegant layouts that work on all devices.