如何将图像放入具有非固定高度的容器中？

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.

Answer 1

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>

Answer 2

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>