How to set max-height of an image to height of the parent div in CSS rules?

Question

I need the height of an image to be constrained to the parent's div height containing text. Is there a way to do this in CSS?

I have the following:

 img { float: right; max-width: 500px; max-height: inherit; } 

 <div> <img src="https://images.freeimages.com/images/large-previews/e51/tokyo05-2-1447803.jpg" /> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> </div> 

Answer 1

Absolute positioning is one of the solutions

img {
  position: absolute;
  right: 0;
  max-width: 500px;
  max-height: 100%;
}
div {
  position: relative;
}

Answer 2

I would use the image as background

 .box { background:url("https://images.freeimages.com/images/large-previews/e51/tokyo05-2-1447803.jpg") right/auto 100% no-repeat; } 

 <div class="box"> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> </div>