Question

似乎已经消失的人为我编写了这段代码，我正在试图弄清楚如何修改它以满足我当前的需求。

我想将icon.svg图形缩放为高度的百分比和/或宽度的百分比。目前svg太高了。

当前代码

<!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>

Answer 1

使用＆＃39; vmin＆＃39;对于图像的高度或宽度。＆＃39; VMIN＆＃39;将根据视图较小的方面缩放图像。 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;
    }

或者您可以使用＆＃39; vmax＆＃39;通过更大的视图方面缩放图像。

您可以在此处阅读更多内容：https://www.w3schools.com/CSSref/css_units.asp。

SVG Scaling - 窗口高度或宽度的百分比

1 个答案: