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

【问题标题】：Image width does not change proportionally in SafariSafari 中的图像宽度不会按比例变化
【发布时间】：2020-08-09 21:54:47
【问题描述】：

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

我做错了什么？

【问题讨论】：

在 Firefox 中也能正常工作。那么在 Safari 中，图像高度是否会跟踪容器高度？

标签： javascript jquery html css safari

【解决方案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/

【讨论】：

【解决方案2】：

还可以更新以更改图像大小而不是容器大小。因此，您可以更改图像大小并拥有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>

【讨论】：

我无法运行您的 sn-p。正下方有一个错误。
更新了侧边栏中的 jQuery。
但是如果你真的需要改变容器的高度呢？问题是，即使是 Safari，如果您在此大小更改后更改 devtools 中有关 img 的任何 css，它会将内容重新呈现为预期结果。所以这确实是 Safari 的错误，它无法立即执行。

【解决方案3】：

对于那些和我一样无法直接更改图像高度（如已接受的答案）并且必须更改容器高度的人，有一个解决方案。不是很优雅，但它确实有效。

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

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

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

【讨论】：