似乎已经消失的人为我写了这段代码，我正在努力弄清楚如何修改它以满足我当前的需要。
我想将 icon.svg 图形缩放为高度的 % 和/或宽度的 %，以较小者为准。目前 svg 太高了。
引用站点 http://kruegermultimedia.com/
当前代码
<!DOCTYPE html>
<html>
<head>
<title>Krueger Multimedia</title>
<style>
body {
background-color: #000000;
}
</style>
<style>
.logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body onresize="resize()">
<div class="logo">
<img id="logo" src="icon.svg" />
</div>
<script>
var logo = document.getElementById('logo'),
mult = 0.8;
var resize;
(resize = function() {
var w = window.innerWidth,
h = window.innerHeight;
if (w < h) {
var width = (w * mult);
logo.width = width;
} else {
var height = (h * mult);
logo.width = height;
}
})();
</script>
</body>
最佳答案
使用“vmin”作为图像的高度或宽度。 'vmin' 将根据较小的 View 方面缩放您的图像。 1vmin是相对于1%的。
.logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.logo img {
height: 75vmin;
}
或者，您可以使用“vmax”按较大的 View 方面来缩放图像。
您可以在此处阅读更多信息:https://www.w3schools.com/CSSref/css_units.asp .
关于javascript - SVG 缩放 - 窗口高度或宽度的百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48330827/