How to maintain aspect ratio using HTML IMG tag

Strategies using CSS

Master the power of object-fit property

Object-fit property in CSS is a very handy tool. It consists of five options—none, fill, cover, contain, scale-down, which lets you control the appearance of your images. 'Cover' option ensures entire coverage but may lead to cropping, whereas 'contain' maintains the natural aspect ratio.

.img-cover {
  object-fit: cover;    /* Fills up the box, say bye to your dated parts sof your image! */
}

.img-contain {
  object-fit: contain;  /* Your image nicely fits, none of it goes out of bounds. Phew! */
}


Leverage the max-width and max-height properties

For keeping your images well-behaved under all screen sizes, max-width: 100%; and max-height: 100%; attributes are your best pals. They prevent overflows beyond their parent containers.

.limit-img {
  max-width: 64px;    /* Size limit: You shall not pass! */
  max-height: 64px;
}


Preserve the aspect ratio with auto dimensions

By default, if you only provide width or height, the browser sets the dimension left unprovided to auto. An auto value helps retain the original aspect ratio.

.auto-dimension-img {
  width: 100%;   /* The 100% cool kid */
  height: auto;  /* I got your back, brother! */
}


Going beyond basics

Tackling dynamic image sources

In case your website needs to handle dynamic images, you need a runtime path for image sources. This means assigning the src attribute either through server-side languages or JavaScript.

document.getElementById("myDynamicImage").src = getDynamicImagePath();  // JavaScript in the rescue mission!


Wrapping images in inline-block

Wrapping images in inline-block elements serves as a neat method to keep things tidy when dealing with multiple images or text.

<div style="display: inline-block;">
  <img src="image.jpg" class="responsive-image">
</div>


Styling for a better look

To take it up a notch, style your images with borders or shadows. A little CSS magic can go a long way in enhancing aesthetics:

.pretty-picture {
  border: 1px solid #ddd;        /* Solo performance by Mr. Border! */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);   /* Adding some shadow drama! */
}


Applying quick inline styles

For quick, one-off style modifications, inline CSS might be your fastest route:

<img src="image.jpg" style="width:100%; height:auto; border:1px solid black;">


Embracing responsive design

Lastly, to make sure your images behave themselves on various screen sizes, don't forget to tuck them within appropriate media queries:

@media (max-width: 768px) {
  .responsive-image {
    width: 50%;    /* Bringing the big guns for smaller screens! */
    height: auto;
  }
}
