如何在 CSS 规则中将图像的最大高度设置为父级 div 的高度？

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>

如何在 CSS 规则中将图像的最大高度设置为父级 div 的高度？

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

html

css

height

image