Maintain image aspect ratio when changing height

Using object-fit to keep things shapely

In CSS, object-fit: contain; allows the image to scale while keeping its aspect ratio. It stops your image from stretching out like an accordion (in a bad way):

img {
  object-fit: contain;
  height: 200px;  /* Pick your height */
}


The dance of the flex-boxes

Flexing with aspect ratio

flex properties combined with object-fit can maintain aspect ratio:

.flex-item {
  flex: 0 0 auto;       /* A flex item that refuses to grow or shrink */
  min-width: 0;         /* Helps flex go on a much-needed diet */
  align-self: center;   /* Staring at the mirror and loving it! */
}

.flex-item img {
  width: 100%;          /* Filling out the flex-item attire */
  height: auto;         /* Keeps you fit */
  object-fit: contain;  /* Like, seriously, "contain" my excitement */
}


Wrapping images nicely

Wrapping images within a div or span offers awesome control within a flex container:

.flex-container div {
  flex: 0 0 auto;
  margin: 0;                /* Margin goes on vacation */
  padding: 0;               /* Padding needs to chill too */
  display: block;           /* Planning to block the exit door */
}

.flex-container div img {
  max-width: 100%;          /* Image maxing out its potential */
  height: auto;             /* Adaptability, thy name is auto */
}


Addressing browser-affairs

Handling different browser quirks

Unsurprisingly, browser-specific bugs dance around. Flexbox has a knack to make ordinary people pull their hair out due to sizing bugs. The "Implied Minimum Size of Flex Items" is a topic worth reading and Mozilla Developer Network is the Wikipedia of bug reports and solutions.

Testing it on different browsers

Ensure that your images are well-behaved when they meet different browsers:

- Chrome: Keep an eye on the sneaky **Flexbox Intrinsic Sizing** bug.
- Firefox: Monitor if Flex Item Min-Size feature is rolling on the ramp.
- Safari: Ensure Safari behaves while handling `object-fit` and flex properties.

Feel free to take a peek at this practical example over here: http://jsfiddle.net/ykw3sfjd/

The CSS survival kit for aspect ratios

Giving display: table; a fair chance

If flexbox has been showing attitude, display: table; can simplify your life while keeping image aspect ratios intact:

.image-wrapper {
  display: table;
}

.image-content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;   /* We'll give flexbox a break */
}

.image-content img {
  height: 200px;         /* Take height as your loyal friend */
  width: auto;           /* When has auto let us down, ever? */
}


Checking your webpage's health

Also, monitor your web performance. Using too many high-resource properties could compel users to click the dreadful back button. Google Lighthouse can come to your rescue for identifying performance issues.