Flexbox image scale to height and keep aspect ratio

Question

I have a DIV which is scaled to available height using CSS flexbox. In this DIV is an image which I would like to scale along with the DIV in both dimensions. That means it should be scaled keeping its aspect ratio and the dimensions which is less than the respective DIV dimension should be centered.

I can make the image follow the width of the DIV, but not the height. Therefore, portrait images escape from the DIV bounds.

Here is a jsFiddle to demonstrate the problem.

html, body {    height: 100%;    margin: 0;  }  .container {    display: flex;    flex-direction: column;    height: 100%;  }  .box {    flex: 1 1 auto;    display: flex;    justify-content: center;    align-items: center;  }  .box img {    width: auto;    height: auto;    max-width: 90%;    max-height: 90%;  }

<div class="container">    <div class="box"></div>    <div class="box" style="background: pink;">      <img src="//dummyimage.com/300" />    </div>    <div class="box"></div>  </div>

Answer 1

When you specify the height as a percentage value, that is a percentage with respect to the height of the parent element. It is also true with the <img> tag.

In this unknown height flexbox layout, you can use the position tricks to make the image to fit both the width and height of the flex item, and use transform tricks to do the centering.

jsFiddle

html, body {    height: 100%;    margin: 0;  }  .container {    height: 100%;    display: flex;    flex-direction: column;  }  .box {    flex: 1 1 auto;    display: flex;    justify-content: center;    align-items: center;    position: relative;  }  .box:nth-child(2) {    background: pink;  }  .box img {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    width: auto;    height: auto;    max-width: 100%;    max-height: 100%;  }

<div class="container">    <div class="box"></div>    <div class="box">      <img src="//dummyimage.com/300" />    </div>    <div class="box"></div>  </div>

You can also use background image, that can make it much easier, the key is to use the value contain. See the simplified demo below.

jsFiddle

html, body {    height: 100%;    margin: 0;  }  .container {    height: 100%;    display: flex;    flex-direction: column;  }  .box {    flex: 1 1 auto;  }  .box:nth-child(2) {    background: pink url(//dummyimage.com/300) no-repeat center center / contain;  }

<div class="container">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>