Question

如果您在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">

Answer 1

这似乎是个错误。 CSS 2.1说

表示同时包含width和height的已替换元素计算为auto，使用上面Minimum and maximum widths下的算法查找使用的宽度和高度。然后申请上面"Computing heights and margins"下的规则，使用得到的宽度和高度就好像它们是计算值一样。

在最小和最大宽度算法中，我们有这种情况：

违反约束：h > max-height
已解决的宽度：max(max-height * w/h, min-width)
已解决的身高：max-height

由于min-width为0，因此已解析的宽度应为max-height * w/h。

Webkit似乎使用w，所以它是一个错误。

作为解决方法，您可以使用common technique to force an aspect ratio。

＆＃13;

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

＆＃13;

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

＆＃13;

但请注意，效果仅在加载页面时有效。如果那样你调整窗口的大小，它就会中断。要解决这个问题，请使用JS：

强制重新渲染

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

WebKit SVG高度和最大高度差异

1 个答案: