#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.
>Solution :
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>