How to fit an image inside a container with non-fixed height?

Question

#myDiv {
  display: inline-block;
  border:1px solid red;
  width:200px;
}
#myImg {
  max-height:100%;
  max-width:100%;
}
#anotherDiv {
  display:inline-block;
  border:1px solid blue;
  height:100px;
  width:50px;
}

<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>

I want to fit the image height to its container div.

Using height:100%; works only when the container have a fixed height.

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a [Stack Snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/?more_on=xron.net). See How to create a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). It also very helpful to show in your Question an expected result, and quote any (exact) errors you are getting. You are expected to show any research you have put into solving this question yourself. — Ron, Nov 29 '21 at 09:16
Does this answer your question? [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) — Andrew Morton, Nov 29 '21 at 09:19
No, it doesnt work in my case because the container has no specified height — Val Ruiz, Nov 29 '21 at 09:21

score 2 · Accepted Answer · answered Nov 29 '21 at 09:34

Simply add display:flex to container to get the stretch alignment by default:

#myDiv {
  display: inline-flex;
  border:1px solid red;
  width:200px;
}
#anotherDiv {
  display:inline-block;
  border:1px solid blue;
  height:100px;
  width:50px;
}

<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>

A different result with display:grid:

#myDiv {
  display: inline-grid; 
  grid-auto-flow:column; /* column flow */
  justify-content: flex-start; /* align everything to left */
  border:1px solid red;
  width:200px;
}
#myImg {
  height:100%; /* image 100% height of the div */
}
#anotherDiv {
  display:inline-block;
  border:1px solid blue;
  height:100px;
  width:50px;
}

<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>

<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv" style="height:50px">
</div>
</div>

Thank you. `display:flex` and stretch doesnt keep the aspect ratio but with `display:grid` it does — Val Ruiz, Nov 29 '21 at 09:52

score 0 · Answer 2 · answered Nov 29 '21 at 09:59

Here the another way without using flex: I will recommend that display:flex; will be the good and easy one.

#myDiv {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    position: relative;
    padding-left: 22px;
}

#myImg {
    position: absolute;
    left: 0;
    height: 100%;
}

#anotherDiv {
    display: inline-block;
    border: 1px solid blue;
    height: 100px;
    width: 50px;
}

<div id="myDiv">
<img src="https://i.imgur.com/rw9ypWD.png" id="myImg" />
<div id="anotherDiv"></div>
</div>

How to fit an image inside a container with non-fixed height?

2 Answers2