Question

我嵌入了宽度为100％且自动高度的SVG。最大高度为视口的80％。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        html, body{
            width: 100%;
            height: 100%;   
        }
        img{
            width: 100%;
            height: auto;
            max-height: 80vh;
        }
    </style>
</head>
<body>
    <img src="example.svg">
</body>
</html>

如果SVG不适合80％的视口，它将被指定的最大高度裁剪。问题是这也是SVG的中心：

我需要的是通过<img>保持嵌入，因为这是我从CMS收到的内容，并将SVG放在左侧，就像background-position: left top;一样。即使裁剪图像，如何将<img>内容放在左侧？

Answer 1

尝试将preserveAspectRatio="xMinYMin meet"添加到svg文件的root svg元素中，如下所示。

<svg width="200px" height="200px" 
  viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" 
  preserveAspectRatio="xMinYMin meet">
  <rect width="100%" height="100%" fill="red"/>
</svg>

Answer 2

你有没有尝试过：

float:left;

通过img嵌入时，将SVG置于左侧

2 个答案: