在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");

});

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

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

我做错了什么？

Answer 1

另外，更新以更改图像大小而不是容器大小也是可行的。因此，您可以更改图像大小，并让div扩展来包含图像，而不是让图像拉伸填充div大小( div的宽度没有变化，因此图像的宽度也不会改变)，如下所示：

http://jsfiddle.net/jy8xwhj3/

​

$("#2").click(function() {
  $(".image-wrapper img").css("height", "+=5");
});

.content {
  overflow: hidden;
  font-size: 0;
}

.image-wrapper {
  float: left;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="2">Increase height</button>

<div class="content">
  <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>

​

Answer 2

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

​

$("#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/

Answer 3

对于那些和我一样不能直接改变图像高度的人(如接受的答案)，并且必须改变容器的高度，有一个解决方案。不是和优雅的，但它是有效的。

Safari实际上知道如何正确地呈现它，只是它没有“意识到”什么时候应该重新修改它。修改高度后，如果更改任何可能影响元素框的css属性，则强制呈现，并将新高度输入帐户。

只需创建一个虚拟类，例如，最大宽度:100%，每次更新高度时，打开或关闭类(使用jQuery .toggleClass轻松完成)。内容被重新命名，每个人都很高兴。

如果有人知道它背后的机制/问题，我很好奇。