How to force image resize and keep aspect ratio?

In CSS, the most common method to adjust image size while preserving its aspect ratio is to use the width and height properties, setting one to a specific value and the other to auto. This ensures the image's aspect ratio remains intact during resizing.

Example Code:

css
.responsive-image {
  width: 100%; /* or set to other specific width */
  height: auto;
}

HTML Usage:

html
<img src="image.jpg" class="responsive-image" alt="descriptive text">

Explanation:

In this example, setting the image width to 100% causes the image to scale according to the parent container's width, while the height is set to auto, which automatically adjusts the height to maintain the original aspect ratio.

Advanced Usage:

If you want the image to behave differently at specific responsive layout breakpoints, you can use media queries to define different width or height values:

css
.responsive-image {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .responsive-image {
    width: 50%;
  }
}

In this advanced implementation, when the screen width is less than 600px, the image width adjusts to 50% while the height remains auto, ensuring the aspect ratio stays unchanged.

Using this approach, images maintain good visual appearance across various screen sizes without losing their original aspect ratio, making it ideal for responsive web design.