html - 如何在保持宽高比的同时使任意 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。

评论后编辑:

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

编辑纯 javascript 方法:

查看纯 javascript 版本 here .