javascript - 在固定 Div 内相对缩放 Svg(CSS 和 JS)

Question

我有两个尺寸不一样的svg图形，但是内容确实比较相配，看下面的例子:

目标

我寻找一种解决方案，它保留两个 svg 之间的比例，同时将两个图像都放在“固定框架”中。

问题

下面的例子展示了左边的人如何“变大”，因为 svg 比右边的人的 svg 小，并且可以在固定框架内增长更多(max-width and max-height 100%) 像这样

我无法更改 svg 文件(即 View 框)，因为它们已加载到 Canvas 上并在那里工作。

这两个 SVG 只是一个例子，还有很多其他 SVG 具有不同的大小和比例。

JsFiddle

我准备了一个 fiddle 来尝试可能的解决方案:https://jsfiddle.net/e6hs4w3s/

Answer 1

我知道您希望严格使用 CSS，但作为(潜在的)后备方案，您可以根据较大 svg 的计算高度/自然高度的比率，使用 JavaScript 调整较小 svg 的大小。

这是根据所需比例调整较小 img 大小的行:shortImg.height = shortImg.naturalHeight * (tallImg.height/tallImg.naturalHeight);

var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];

if (img1.naturalHeight > img2.naturalHeight) {
  tallImg = img1;
  shortImg = img2;
} else {
  tallImg = img2;
  shortImg = img1;
}

shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);

.Box {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
  vertical-align: bottom;
}

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

<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />

<hr />

<div class="Box">
  <img class="Tile" src="http://imgh.us/lay.svg" />
</div>

<div class="Box">
  <img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>