javascript - 图像宽度在 Safari 中不会按比例变化

Question

当我尝试动态更改图像父级 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>

CSS:

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

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

JS(测试动态增加高度)

$("#2").click(function() {
  $("div").css("height", "+=5");

});

这是一个可以玩的 fiddle :

http://jsfiddle.net/MNL29/53/

我做错了什么？

Answer 1

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

$("#2").click(function() {
  $("div").css("height", "+=5");
});

html,
body {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  height: 100px;
  background: red;
}

.image-wrapper {
  display: inline-block;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
    /><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
    /><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
    /><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
    <br />
    <button id="2">Increase height</button>
</div>

或在 JSFiddle 中查看:http://jsfiddle.net/6e6zpetd/