Javascript 在Safari中，图像宽度不会按比例变化

当我尝试动态更改图像父div的高度时，宽度在Chrome中会成比例地改变。但是，这种预期行为在Safari中不起作用

HTML:

<div class="content">
  <div class="imagee-wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
  </div>
  <div class="image-wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
  </div>
  <div class="image-wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
  </div>
  <div class="image-wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
  </div>
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<button id="2">Increase height</button>

div {
  height: 100px;
  float: left;
  background: red;
}

img {
  max-width: 100%;
  max-height: 100%;
}

JS（测试动态增加的高度）

这里有一把小提琴可以玩：

---

我做错了什么？

对我来说，它是这样工作的：

$（“#2”）。单击（函数（）{
$（“div”）.css（“高度”，“+=5”）；
});
html，
身体{
宽度：100%；
身高：100%；
}
.内容{
宽度：100%；
高度：100px；
背景：红色；
}
.图像包装器{
显示：内联块；
}
img{
最大宽度：100%；
最大高度：100%；
垂直对齐：顶部；
}



增加高度
更新以更改图像大小而不是容器大小同样有效。因此，您可以更改图像大小并使div拉伸包含图像，而不是让图像拉伸填充div大小（div的宽度不会改变，因此图像的宽度也不会改变，这在某种意义上是合理的）：



$（“#2”）。单击（函数（）{
$（“.image wrapper img”）.css（“高度”，“+=5”）；
});
.content{
溢出：隐藏；
字号：0；
}
.图像包装器{
浮动：左；
}
img{
高度：100px；
最大宽度：100%；
最大高度：100%；
}

增加高度
对于那些和我一样，不能直接更改图像高度（如接受的答案）并且必须更改容器高度的人，有一个解决方案。不是很漂亮，但是很管用

Safari实际上知道如何正确渲染，只是不“意识到”何时应该重新渲染。修改高度后，如果更改任何可能会影响元素框的css属性，则会强制渲染，并将新高度纳入考虑范围

只需创建一个虚拟类，例如max width:100%，每次更新高度时，打开或关闭该类（使用jQuery.toggleClass可以轻松完成）。内容重播，每个人都很开心

如果有人知道它背后的机制/问题，我很好奇。
在Firefox中也能正常工作。那么在Safari中，图像高度是否跟踪容器高度？我无法运行您的代码段。下面有一个错误。使用侧栏中包含的jQuery更新。但是如果您确实需要更改容器的高度，该怎么办？问题是，即使是Safari，如果在更改大小后在devtools中更改任何与img相关的css，它也会将内容重新提交到预期结果。所以这真的是Safari的错误，它不能直接完成。
$("#2").click(function() {
  $("div").css("height", "+=5");

});