根据子img高度更改父div高度，不超过父divs max-width

Question

我还没有找到解决我的问题的任何好的CSS代码，并且适用于所有主流浏览器。 话虽这么说，每当我在父div中使用max-height: 90%时，safari会自动执行此操作，并在子img中设置max-height: 100%。但是，Mozilla没有。

是否有任何跨浏览器解决方案，以确保img不会扩展超过父div的高度。但是父div可以调整到孩子的身高，并且仅限于自己的max-height？

我也接受jQuery，但在答案中更喜欢CSS。

说到宽度，父div中的width: 60%和子img中的max-width: 100%始终为<{1}}。

代码

.fullScaleContent{
    position: fixed;
    width: 60%;
    max-height: 90%;
    height: auto;
    margin: 2% auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    -webkit-transform: translate(-50%, -55%); 
    -ms-transform: translate (-50%, -55%);
}
.fullScaleContent img{
    width:auto;
    height:auto;
    max-width: 100%;
    max-height: 100%;
}

图片示例：第一张图片是safari中的高度限制，第二张是在Firefox中。我需要两者都类似于safari。 PS：黑色边框是div的实际边框

有限宽度 - 两者都很好 - 根据img调整高度，最大宽度为60％

Answer 1

已使用object-fit: contain

如果您使用position，请在图片上使用它，以便它在流程中。

在整页中查看代码段并调整其大小。

段

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}
.fullScaleContent {
  position: fixed;
  width: 60%;
  max-height: 90%;
  height: auto;
  margin: 2% auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  -webkit-transform: translate(-50%, -55%);
  -ms-transform: translate (-50%, -55%);
}
.fullScaleContent img {
  position: relative;
  object-fit: contain;
  min-width: 128px;
  max-width: 100%;
  height: auto;
}

<figure class="fullScaleContent">
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
</figure>