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

Question

瘦子：有没有办法让图像上的最大高度服从祖先的固定高度 不是它的直系父代吗？

我明白max-height需要一个固定的高度来计算，所以这不是重复的问题为什么 max-height 不能神奇地工作。

我有一个元素 (.rightbox)，其高度为 100%，并且绝对位于自动高度容器内。该元素符合预期的高度。

然后该元素有一个最大高度为 100% 的子元素。这个元素也符合预期的高度，因为.rightbox父元素有一个设置的高度（%+绝对定位）

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

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

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

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

*{
  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;
}

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

Answer 1

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

When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height

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

例如，我将图像的父级 div 的最大高度参数切换为 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

Max-height image inside max-height div inside fixed height div

css

height