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

标签 css height

瘦子:有没有办法让图像上的最大高度服从不是其直接父级的祖先的固定高度?

我了解 max-height 需要从 开始计算的固定高度, 所以这是 不是重复的问为什么 max-height 不能神奇地工作的问题。

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

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

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

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

.rightbox 上设置 px 高度没有效果。

删除 .rightbox 之间的 div和 img使 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>

最佳答案

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

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



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

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

在这里,例如,我将图像的父 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>


祝你今天过得愉快!

关于css - 固定高度 div 内的最大高度 div 内的最大高度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45313391/

相关文章:

html - div 超出背景颜色

css - 粘性页脚,但仅在某些情况下

css - 从浏览器在自定义区域打印

html - 为什么“最大高度:0”无法完全隐藏我的div?

css - 空Div需要成为 parent 的100%

javascript - 如何在 Canvas 中制作带有条形的图表,条形具有 Canvas 的高度?

javascript - jQuery触发按键调用功能

css - 固定列高度在CSS

css - 如何有一个窗口高度的一定百分比的上边距?

css - 为什么我的图像和背景图像在移动设备上如此模糊(使用 Bootstrap )