通过 img 嵌入时将 SVG 定位到左侧
dud*_*ude 6 html css svg image
我正在嵌入一个宽度为 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 像 a 一样放置在左侧background-position: left top;。<img>即使图像被裁剪，如何将内容定位到左侧？
尝试添加preserveAspectRatio="xMinYMin meet"到 svg 文件的根 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>