Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14641, member: 3917"]
Ich habe mal eine Demo gemacht, wie das funktioniert:
[CODE]<!DOCTYPE html>
<html>

<head>
    <title>irgendetwas</title>
    <meta charset="UTF-8">
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

body {
            margin: 0;
        }

#wrapper {
            display: inline-block;
            transform-origin: left top;
        }

#wrapper img {
            width: 1280px;
            height: 800px;
        }

.gas {
            font-size: 20px;
            padding: 5px;
            background: red;
            color: white;
            border-radius: 10px;
            position: absolute;
            top: 132px;
            left: 925px;
        }

.kollektor {
            font-size: 20px;
            padding: 5px;
            background: red;
            color: white;
            border-radius: 10px;
            position: absolute;
            top: 75px;
            left: 60px;
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <img src="images/dashboard-solar.jpg">
        <div class="gas">5,3 m³</div>
        <div class="kollektor">41 °C</div>
    </div>
    <script>
        const
            bdy = document.querySelector('body'),
            wr = document.querySelector('#wrapper'),
            // Seitenverhältnis des Wrappers ermitteln:
            boxWrapper = wr.getBoundingClientRect(),
            ratioWrapper = boxWrapper.width / boxWrapper.height;
        function adjustIt() {
            console.log('fired');
            const
                // Seitenverhältnis des Body ermitteln:
                boxBody = bdy.getBoundingClientRect(),
                ratioBody = boxBody.width / boxBody.height;
            let factor;
            // Ist das Seitenverhältnis des Body größer
            // als das des Wrappers?
            if (ratioBody > ratioWrapper) {
                // Wir müssen die Höhe anpassen
                factor = boxBody.height / boxWrapper.height;
            } else {
                // Wir müssen die Breite anpassen
                factor = boxBody.width / boxWrapper.width;
            }
            // Wrapper mit Bild und Messwerten darin skalieren:
            wr.style.transform = `scale(${factor})`;
        }
        adjustIt();
        window.addEventListener('resize', adjustIt);
    </script>
</body>

</html>[/CODE]
Da zeigt sich auch ein kleiner Nachteil dieser Methode: Die Schrift wird mit skaliert und bei schmalem Bildschirm wird sie recht klein. Da sehe ich zwei Möglichkeiten:
[LIST=1]
[*]Das Verkleinern nach unten begrenzen, so dass der Benutzer scrollen muss.
[*]Da sich das (schmaler Bildschirm) primär auf dem Handy abspielt, darauf vertrauen, dass der Benutzer zoomt um die Schrift lesen zu können.
[/LIST]
[/QUOTE]

Authentifizierung