Как установить максимальную высоту изображения в высоту родительского div в правилах CSS?

Question

Мне нужно, чтобы высота изображения была ограничена высотой div родительского элемента, содержащей текст. Есть ли способ сделать это в CSS?

У меня есть следующее:

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

Абсолютное позиционирование - одно из решений

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

Answer 2

Я бы использовал изображение в качестве фона

.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>