围绕 SVG 的框的纵横比错误答案

【问题标题】：Box around SVG has wrong aspect ratio围绕 SVG 的框的纵横比错误
【发布时间】：2019-11-19 07:13:01
【问题描述】：

我正在尝试在不同大小的图像上排列占位符 SVG。一切都很好除了围绕 SVG 的框不尊重图像的纵横比。 SVG 本身支持纵横比，但它周围的框不支持。

<img src="https://svgur.com/i/E06.svg" />

img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;
  height: 100%;
  max-height: 94%;
  max-width: 90%;
  border-radius: 20px;
  box-shadow: 1vw 1vh 5vh 0px rgba(0, 0, 0, 0.75);
}

JSfiddle here

似乎height: 100% 和max-height: 94% 一起导致SVG 的盒子总是有94% 的高度。如果我删除 height，那么我只会得到一个无法按我想要的方式缩放的小 SVG。在示例中的缩放和纵横比方面，我还没有找到任何方法使 SVG 框的行为方式与 SVG 内容的行为方式相同。

【问题讨论】：

标签： css svg

【解决方案1】：

把宽度：100%；高度：100%；删除最大高度和最大宽度

【讨论】：