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的高度？

2 个答案: