Question

瘦：有没有办法让图像上的最大高度服从不其祖先的固定高度直接父母？

我了解max-height 需要一个固定的高度来计算，所以这是不重复的问题，询问为什么max-height不会出现问题。神奇的工作。

我有一个100％高度的元素（.rightbox）并且绝对位于自动高度容器中。该元素符合预期的高度。

该元素的最大高度为100％。此元素也符合预期高度，因为.rightbox父级具有设定高度（％+绝对定位）

但是现在......我在里面有一个容器的图像......并且它不符合最大高度。我认为拥有一个具有可计算高度的祖先将允许该元素符合最大高度。

最大宽度有效，我相信它使用相同的祖先来计算宽度。

在.rightbox上设置px高度无效。

删除.rightbox和img之间的div会导致img符合所需的最大高度。

＆＃13;

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div,
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

＆＃13;

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

＆＃13;

Answer 1

这个答案有助于解决这个问题：

为孩子指定max-height的百分比时，它是a 父母实际身高的百分比，而不是父亲的最高身高

https://stackoverflow.com/a/14263416/2735479

然后，是，我们可以使图像上的最大高度服从祖先的固定高度，但直接父级必须具有定义的高度百分比，而不仅仅是最大高度。

例如，在这里，我将图像的父div的max-height参数切换为100％的高度参数，（在Mozilla Firefox版本58上测试）

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div{
  height:100%;
  max-width:100%;
}
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

度过美好的一天！

固定高度div内最大高度div内的最大高度图像

1 个答案: