html div Flexbox image scale to height and keep aspect ratio



flexbox aspect ratio div (4)

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>


Answer #2

Based on @darrylyeo answer.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Answer #3

if you can change from flex to block:

https://jsfiddle.net/svArtist/ug6eoxfs/

as @janfoeh pointed out, using object-fit: contain makes it possible:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:relative;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.box {
    background: yellow;
    width: 100%;
    padding: 0 5%;
    box-sizing:border-box;
    max-width: 100%;
    height: 100%;
    max-height:100%;
    position:relative;
}

.box img {
    height:100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: auto;
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:block;
    object-fit: contain;
}

If the Flex Layout is needed, as a last resort you might consider using a background-image, which makes the whole thing really easy: https://jsfiddle.net/svArtist/e1c2tLme/

    background: url(http://placehold.it/300) no-repeat center center;
    background-size: contain;

Other than that, I can't find a way that doesn't involve scripting.


Answer #4

Delete the image tag and set it as the background of the .box div with background-size:cover;
jsfiddle 1

or, if you want to avoid cropping:

Delete the image tag and set it as the background of the .box div with background-size:contain;
jsfiddle 2





flexbox