How to resize an image in CSS?

Resizing an image using CSS is a common and effective technique in modern web development. CSS allows you to control the dimensions of an image precisely while maintaining design consistency, responsiveness, and performance across devices.

Following are the most reliable methods to resize images using CSS:

1. Using width and height Properties

You can directly set the image size by specifying the width and height in fixed units such as px, em, or %.

img {
  width: 300px;
  height: 200px;
}

This method gives you exact control but can lead to distortion if the aspect ratio is not preserved.

2. Maintaining Aspect Ratio

To prevent the image from appearing stretched or squished, define only one dimension (usually width) and set the other to auto:

img {
  width: 300px;
  height: auto;
}

This approach resizes the image while maintaining its original proportions.

3. Responsive Image Resizing

To make images adapt to different screen sizes, use percentage-based sizing and max-width:

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

This makes the image scale down on smaller screens while ensuring it doesn’t exceed the container’s maximum width.

4. Using CSS Classes for Reusability

Instead of applying styles directly to the <img> tag, define a class for better maintainability:

.responsive-img {
  width: 100%;
  height: auto;
  max-width: 500px;
}

Then use it in your HTML:

<img src="example.jpg" class="responsive-img" alt="Responsive Image">

5. Resizing with object-fit for Better Control

When working with images inside containers or backgrounds, object-fit helps maintain the aspect ratio while fitting the image to its container:

img {
  width: 100%;
  height: 300px;
  object-fit: cover; /* or 'contain' depending on your need */
}

• cover: The image fills the container while maintaining aspect ratio (cropped if necessary).
• contain: The image is scaled to fit entirely within the container without cropping.