Image resizing to parent div keeping ration and respecting image height

Question

I want to display a picture inside a div, where the picture is accordingly scaled to the height or width, depending which is larger.

Here is a small jsfiddle with the problem: https://jsfiddle.net/efbydkLz/1/

• The first box is how it should be. The image-width is larger than the div-with and is accordingly scaled.
• The second box shows the problem: The image-height is too large and won't get scaled.
• The third box shows, that the div with the class "picture" is as big as it can be. The text can be short or long, the picture-div takes the rest of the space.

Somehow the image ignores only the height of the parent div. It responses correctly to the width.

Does anyone know, how to scale the image properly, so that the image is always inside the picture-div and doesn't ignore the div-height?

Thanks in advance!

.outer {
  width: 30vw;
  height: 300px;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
}

.picture {
  background: red;
  flex-grow: 1;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/500x100">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/100x500">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    </div>
    <div class="picture">
    </div>
  </div>
</div>

Answer 1

To make the flex child able to give a value inheritable (calculated from the flex model) to size via percentage its own children, you need to use overflow:hidden, else height:100%; will be height:null; .

This works if .picture is a flex child, if not, min- max- height:100% requires an height value set on parent. There's only html{height:X%;} that is able to inherit the height from the browser's window to calculate the final value.

.outer {
  width: 30vw;
  height: 60vh;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
  /* extra to work in the small snippet here */
  min-height: 250px;
}

.picture {
  background: red;
  flex-grow: 1;
  overflow:hidden;/* here make it mind its size so min-/max-/height : % can be used for the direct children */
}

img {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/500x200">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/200x500">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    </div>
    <div class="picture">
    </div>
  </div>
</div>

your forked fiddle : https://jsfiddle.net/hb784xp1/

Answer 2

This works when you add an additional wrapper div around the images. Colored the background of picture-inner blue so you can see the layout effect better.

.outer {
  width: 30vw;
  height: 300px;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
}

.picture {
  background: red;
  flex-grow: 1; /* make sure the picture container takes up all remaining space */
  display: flex;
  flex-direction: column;
}

.picture-inner {
  background: blue;
  max-height: 100%; /* img doesnt respect its own max-height rule as expected without this extra wrapper */
}

.picture img {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="picture">
      <div class="picture-inner">
        <img src="https://via.placeholder.com/500x100">
      </div>
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
    </div>
    <div class="picture">
      <div class="picture-inner">
        <img src="https://via.placeholder.com/100x500">
      </div>
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    </div>
    <div class="picture">
    </div>
  </div>
</div>