How to Resize an Image While Maintaining Aspect Ratio in CSS?

css

To resize an image while maintaining aspect ratio in CSS, follow these steps:

1. Create the CSS class for the image element that you want to resize. For example:

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

This class sets the maximum width of the image to 100% of the container and the height to auto. This ensures that the height adjusts automatically according to the width, maintaining the aspect ratio.

2. Apply the CSS class to the image element by adding the class attribute to the img tag. For example:

<img src="image.jpg" alt="Image description" class="img-responsive">

This will apply the img-responsive class to the image and resize it while maintaining the aspect ratio.

Note: You can change the class name to any name you prefer and adjust the max-width property to the desired value.

Latest Questions