如何在保持纵横比的同时使任意 SVG 扩展到其父容器？

Question

我想在保持纵横比的同时将任意 SVG 放大到其父容器。请注意，我无法修改 SVG 本身，因此涉及修改 SVG 的解决方案（例如编辑其 viewBox 属性）在此处不适用。

这是一个演示问题的 JSfiddle：https://jsfiddle.net/mj9o0nea/

如果你修改窗口的大小，你会看到图像在不保持纵横比的情况下缩放。

来自 JSfiddle 的 CSS：

html {
  height: 100%;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}
body {
  height: 100%;
  margin: 0 0 0 0;
}
img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;

  left: 5%;
  right: 5%;
  top: 3%;
  bottom: 3%;
  max-height: 94%;
  max-width: 90%;

}
.ph {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

像 JPG 这样的普通图像可以正确显示、缩放和居中（例如 <img src=s.jpg ...），但 SVG 将无法正确显示（例如 <img src="data:image/svg+xml..."）

Answer 1

您需要选择当父元素的纵横比与图像的纵横比不同时会发生什么。我有forked the fiddle 来展示一种方法。为清楚起见，我省略了ph 类并将代码添加到img css。

与原始代码的不同之处在于width 和height 都是auto 以保留纵横比。由于提供了max-height 和max-width，它们将确定哪个维度填充容器。另一个维度不填充容器以保持纵横比。

您也可以通过裁剪较大的尺寸来fill the container。诀窍是提供min-height 和min-width。

在 cmets 之后编辑：

正如评论中所建议的，我没有考虑到父级 (body) 的大小可能大于 img 的本机大小的可能性。在那种情况下，我想不出一个纯粹的css 解决方案。我再次分叉了小提琴here 来展示使用jQuery 的解决方案。简而言之，该脚本在加载后立即存储图像比例并设置调整大小的处理程序。该过程将次要维度设置为身体的维度，并相应地设置其他维度。

编辑纯javascript 方法：

查看纯javascript版本here。