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

对我来说，它的工作原理如下：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或者在JSFiddle中看到：http://jsfiddle.net/6e6zpetd/

Answer 2

同时更新以更改图像大小而不是容器大小。因此，不要让图像拉伸以填充div大小（div的宽度不会改变，因此可以使图像的宽度也不会改变），您可以更改图像大小并使用div拉伸来包含图像，如下所示：

http://jsfiddle.net/jy8xwhj3/

＆＃13;

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

＆＃13;

.content {
  overflow: hidden;
  font-size: 0;
}

.image-wrapper {
  float: left;
}

img {
  height: 100px;
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 3

对于那些与我一样不能直接更改图像高度（如接受的答案）并且必须更改容器高度的人，有一个解决方案。不是很优雅，但是可以。

Safari实际上知道如何正确呈现它，只是在重新呈现它时才“意识到”。修改高度后，如果更改任何可能影响元素框的css属性，它将强制进行渲染，并将新高度记入帐户。

只需创建一个虚拟类，例如max-width：100％，每次更新高度时，打开或关闭该类即可（使用jQuery .toggleClass轻松完成）。内容重新呈现，每个人都很高兴。

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

Safari中的图像宽度不会按比例变化

3 个答案: