SVG縮放比例-窗口高度或寬度的百分比

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

使用“ vmin”表示圖像的高度或寬度。 “ vmin”將按較小的視圖比例縮放圖像。 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”按較大的視圖比例縮放圖像。

您可以在這里閱讀更多信息： https : //www.w3schools.com/CSSref/css_units.asp 。

SVG縮放比例-窗口高度或寬度的百分比

問題描述

1 個解決方案

解決方案1
0 2018-01-18 21:53:05

SVG縮放比例-窗口高度或寬度的百分比

問題描述

1 個解決方案

解決方案1 0 2018-01-18 21:53:05

解決方案1
0 2018-01-18 21:53:05