html - WebKit SVG高度和最大高度差异

如果在Chrome或Safari中运行以下两个示例（Firefox不受影响），您将看到SVG图像宽度上的差异。
第一个示例似乎是IMO的正确行为，但第二个示例中svg似乎被拉伸了。那是虫子吗？有什么解决办法吗？
例1-height:100%，它按预期工作。

html, body {
  height: 100%;
  margin: 0;
}
img {
  background: silver;
  vertical-align: top;
  height: 100%;
}

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">

例2-max-height:100%，图像的主要部分移动到中心，并在左右两侧留下大量空间。

html, body {
  height: 100%;
  margin: 0;
}
img {
  background: silver;
  vertical-align: top;
  max-height: 100%;
}

<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">

最佳答案

这看起来确实是个错误。CSS 2.1说
对于同时width和height的替换元素
计算为auto，使用上面Minimum and maximum widths下的算法查找使用的宽度和高度。然后应用
使用
产生的宽度和高度，就好像它们是计算值一样。
在最小和最大宽度算法中，我们有这样的情况：
约束冲突：h > max-height
解析宽度：max(max-height * w/h, min-width)
解析高度：max-height
因为min-width是0，所以解析宽度应该是max-height * w/h。
Webkit似乎使用了w，所以这是一个bug。
作为解决方法，您可以使用"Computing heights and margins"。

html, body {
  height: 100%;
  margin: 0;
}
#wrapper {
  position: relative;
  display: inline-block; /* Shrink-to-fit width */
  vertical-align: top;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}
.ratio {
  height: 100%;
  vertical-align: top;
  visibility: hidden;
}
.filler {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  background: silver;
  max-height: 100%;
  left: 0;
  top: 0;
}

<div id="wrapper">
  <img class="ratio" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
  <img class="filler" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
</div>

但是，请注意，该效果仅在加载页面时有效。如果你调整窗口的大小，它就会断开。要解决此问题，请使用JS强制重新提交：

window.addEventListener('resize', function() {
  var el = document.getElementById('wrapper'),
      parent = el.parentNode,
      next = el.nextSibling;
  parent.removeChild(el);
  parent.insertBefore(el, next);
});

html, body {
  height: 100%;
  margin: 0;
}
#wrapper {
  position: relative;
  display: inline-block; /* Shrink-to-fit width */
  vertical-align: top;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}
.ratio {
  height: 100%;
  vertical-align: top;
  visibility: hidden;
}
.filler {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  background: silver;
  max-height: 100%;
  left: 0;
  top: 0;
}

<div id="wrapper">
  <img class="ratio" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
  <img class="filler" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
</div>