Question

我正在尝试将占位符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内容相同的方法。

Answer 1

放入宽度：100％; 高度：100％; 删除最大高度和最大宽度

SVG周围的框长宽比错误

1 个答案: