Question

我所经历的是，虽然CSS说它应该位于max-height 700，但它正处于它所处的div的下方。

任何帮助表示赞赏

＆＃13;

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  max-height: 700px;
}

#largephotohold IMG {
  max-height: 100%;
  max-width: 100%;
}

＆＃13;

<DIV id="largephotohold">
<img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

＆＃13;

https://jsfiddle.net/e8nx0cto/

Answer 1

在元素上应用百分比高度时，您需要在父上设置height。设置max-height或min-height不起作用（如您所见）。它必须是height属性。

要进行说明，请将max-height: 700px切换为height: 700px。现在您的图像高度有效。

替代解决方案：由于您告诉您的图片是max-height: 100%，而max-height: 700px的容器，为什么不告诉图片为{{1} }？这将带您解决百分比高度问题。

更多信息：

Working with the CSS height property and percentage values

Answer 2

你非常接近，你只需要将最大高度改为高度。高度必须在父元素上才能使子元素100％正常工作：

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  height: 700px; /* max-height: 700px; */
}

#largephotohold IMG {
  max-height: 100%;
  max-width: 100%;
}
<DIV id="largephotohold">
<img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

Answer 3

max-height: 400px;（在div上）意味着这个div的内容（和它的高度）会有所不同。它可能是100px或600px，我们不知道。 max-height: 400px;限制div的高度。如果内容为200px，div也将为200px。如果内容是500px，div将是400px，但现在我们有额外的100px。在这种情况下，您需要在div上设置overflow: auto或overflow: hidden。如果不这样做，内容（您的图像）将突然/溢出。

JSFiddle：检查div的底部，查看边框的结束位置以及图像溢出。

在您的示例中，div覆盖了身体的90％，其最大高度设置为400px。你没有处理溢出的风格。

#largephotohold {
    width: 90%;
    max-height: 700px; /* 400px in jsfiddle */
}
#largephotohold IMG {
    max-height: 100%;
    max-width: 100%;
}

在图像上使用max-属性似乎有点无意义。图像不是容器。这是内容本身。它应该设置width和/或height。

您应该在div上设置overflow: auto或overflow: hidden，在图片上设置width 100%。你的图像会和div一样宽，它的高度会溢出div。

JSFiddle

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 2%;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  max-height: 400px;
  overflow: auto; /* or hidden */
}

#largephotohold IMG {
  width: 100%;
}

<DIV id="largephotohold">
  <img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

IMG上的最大高度无法在固定DIV内部工作

3 个答案: