How to fit an image vertically in a flex container with direction: column

Question

I'm trying to fit an image vertically in a flex container which has a specific height.

The flex-direction is column, and the image is contained in a flex-item with flex-basis: 100%.

In addition, the image's max-height is 100%.

As you can see in the example, the image does not fit into the red container.

#container {
    background-color: red;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 320px;
    justify-content: space-between;
}

#container > * {
  padding: 5px;
}

#img {
  flex: 0 1 100%;
  /* height: 100%; */
}
img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
    <div id="img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img&w=340&h=500">
    </div>
    <div>
      Something else
    </div>
</div>

Shouldn't the image shrink to fit vertically into the flex container, according to the specification?

The workaround I found is to set the height of #img to 100%, but I have the sensation that it's not the way it should be done.

As an additional note, if I set flex-direction: row to the container, it fits the image horizontally (which is the behaviour I would expect).

give the image max-width: 100% and height: auto i think that can make it — CodeWeis, May 03 '16 at 12:51
Related? - http://stackoverflow.com/questions/30788131/css3-flexbox-maintain-image-aspect-ratio — Paulie_D, May 03 '16 at 13:47
how's this? https://jsfiddle.net/6zm20zv4/1/ I think this is the same sort of issue like when you are trying to set a height to 100% of something where the parent doesn't have a height set — Pete, May 03 '16 at 13:54
@Paulie_D I think it isn't, as I already wrapped the `img` with a `div` to prevent it to be a direct child of the flex container. — pau.moreno, May 03 '16 at 14:22
@pete, but I already set a height for the flex container. Also, this solution breaks the image aspect ratio — pau.moreno, May 03 '16 at 14:23
@pau.moreno but if you don't set the height of the immediate parent element of the image, it won't know what to be a max-height of - it's just the way css works: https://jsfiddle.net/6zm20zv4/6 — Pete, May 03 '16 at 14:37

score 4 · Accepted Answer · edited May 23 '17 at 11:45

You wrote:

The workaround I found is to set the height of #img to 100%, but I have the sensation that it's not the way it should be done.

Actually, it is the way it should be done. The predominant implementation of the spec requires that the height property be applied to the parent when using percentage heights on the child. (Although this is slowly evolving. See my second reference below.)

References:

Working with the CSS height property and percentage values
Heights rendering differently in Chrome and Firefox (includes alternative solutions)
CSS height property definition (W3C)

Wow, you've done quite a lot of research about this! – pau.moreno May 03 '16 at 15:48 — pau.moreno, May 03 '16 at 15:48

score 1 · Answer 2 · answered May 03 '16 at 17:18

For some reason, I couldn't get the <img> to behave (probably because it's a replaced element). So I removed it, and used the .img div with an image as background.

Relevant Changes

.container {
...
  justify-content: center;
  align-items: center;
}

.img {
  flex: 1 0 auto;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
}

SNIPPET

.container {
  background-color: red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  width: 320px;
  justify-content: center;
  align-items: center;
}
.container > * {
  padding: 5px;
}
.somethingElse {
  outline: 1px dashed yellow;
  background: rgba(128,0,255,.3);
  color: white;
}
.img {
  flex: 1 0 auto;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
}

<figure class="container">
  <div class="img">

  </div>

  <figcaption class="somethingElse">
    True Dimentions: 512 x 512 px 
  </figcaption>
</figure>

score -1 · Answer 3 · answered May 03 '16 at 13:23

try this css. its works fine.

#container {
    background-color: red;
    /*display: flex;*/
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 320px;
    justify-content: space-between;
}

#img {
  height: 85%;
  width: 100%;
}

How to fit an image vertically in a flex container with direction: column

3 Answers3