How to auto-resize an image while maintaining aspect ratio

Aspect ratio - Catering for variations

Handling images of different aspect ratios warrants specific styling. Let's breakdown how to handle portrait, landscape, and square images:

img.portrait {
  max-width: 100%;
  height: auto;
  /* Fine-tuned for those 2 am selfies */
}

img.landscape {
  width: auto;
  max-height: 100%;
  /* Landscape pics, as wide as your horizon */
}

img.square {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* Good ol' square, the Instagram classic */
}


These CSS classes ensure the image output is top-notch irrespective of the container size.

Object-fit: Modern Browser's Picasso

The object-fit property in CSS3 offers advanced control for content fitment:

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Picasso couldn't contain better */
}


This power-packed CSS property ensures your image achieves a comfy fit without any stretch or squash dance.

Div: Your image's arena

Ensure your images are comfortably cocooned within a div with zero distortion. Will also run the center CSS property to, well, center the imagery:

.img-container {
  display: block;
  overflow: hidden;
  width: /* your choice */;
  height: /* you decide */;
}

.img-container img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}


Marry margin: auto; with display: block; to have the picture perfectly center-aligned within the .img-container div.

Juggling with SVGs

SVG images are a different ball game altogether and could require you to pull up your socks:

svg {
  width: 100%;
  height: auto;
  /* SVG - Scalable Vexing Graphics */
}


In select scenarios, custom JavaScript may be warranted for dynamic size adjustment.

Background size matters

To manage background-image real-estate, put background-size: cover; and background-position: center; properties into play. The image will thank you for the panoramic stage:

.background-image {
  background-image: url(/* image url */);
  background-size: cover;
  background-position: center;
  /* Because size does matter */
}


Your image plays the perfect jig of maintaining the aspect ratio while staying centered.

Extras: Accessibility and SEO

• Images love being accompanied by alt and title attributes - great for accessibility and SEO. Compliment your img tag with these hotties.
• Invoke width: 100%; and object-fit: contain; for responsive scaling. Your page checks the mirror and smiles.
• Relying on specific width or height at "100%" goes a long way in preserving aspect ratios.
• The overflow: hidden; trick up your sleeve to make larger images play nice with the container.

Comprehensive strategy

Aspect ratio boxes - Wrapping images

Create an aspect ratio box that wraps your div:

.aspect-ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: /* good to be bottom-loaded */;
}

.aspect-ratio-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


Using padding-bottom to create flexible aspect ratio boxes is a CSS-trick not many talk about.

Viewport units - Measure of responsiveness

Viewport units (vw, vh, vmin, vmax) to the rescue for scalability:

img.viewport {
  width: 50vw; /* 50% of the viewport's width */
  height: auto;
}


Viewport units & responsive images are in a long-term relationship.

@media queries - Device managers

Media queries are the device-specific stylists:

@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
    /* Got your back, mobile users! */
  }
}


With media queries, images adjust and deliver the optimal user experience.