Altes Köln

Widget:GOV-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
(Änderung 77846 von Christopher (Diskussion) rückgängig gemacht.)
Markierung: Rückgängigmachung
Zeile 16: Zeile 16:


     .iframe-wrapper {
     .iframe-wrapper {
       width: 100%; /* Volle Breite des Containers */
       width: 100vw; /* Volle Breite des Viewports */
       position: relative;
       height: 100vh; /* Volle Höhe des Viewports */
       overflow: hidden; /* Überschüssige Inhalte außerhalb der Box ausblenden */
       overflow: hidden; /* Überschüssige Inhalte ausblenden */
      position: relative; /* Container für absolutes Positionieren */
     }
     }


     iframe {
     iframe {
       position: relative;
       position: absolute;
       border: none;
       top: 0;
       transform-origin: top left; /* Skalierung startet oben links */
      left: 0;
      width: 100%; /* Standardbreite */
      height: 100%; /* Standardhöhe */
       transform-origin: top left; /* Skalierung ab der oberen linken Ecke */
      transform: scale(1); /* Standard-Skalierung */
     }
     }


     /* Dynamische Skalierung anpassen */
     /* Media Queries für kleinere Bildschirme */
     @media (max-width: 768px) {
     @media (max-width: 768px) {
       iframe {
       iframe {
         width: calc(100% * var(--scale)); /* Skaliere auf die dynamische Breite */
        transform: scale(0.8); /* Skaliere das iframe-Inhalte */
         height: auto; /* Automatische Höhe basierend auf Breite */
         width: 125%; /* Kompensiere die Skalierung, um die Breite zu erhalten */
        height: 125%; /* Gleiche Relation wie Breite */
      }
    }
 
    @media (max-width: 480px) {
      iframe {
        transform: scale(0.7); /* Noch stärkere Skalierung */
        width: 143%; /* Entsprechend der Skalierung erhöhen */
         height: 143%; /* Höhe bleibt proportional */
       }
       }
     }
     }
Zeile 40: Zeile 54:
</div>
</div>


<script>
  const iframe = document.getElementById('responsive-iframe');
  const wrapper = document.querySelector('.iframe-wrapper');
  function adjustIframeScale() {
    const viewportWidth = wrapper.offsetWidth; // Aktuelle Breite des Containers
    const iframeWidth = 1024; // Die bekannte Breite der iframe-Seite (z. B. Desktop-Version)
   
    // Berechne den Skalierungsfaktor
    const scale = viewportWidth / iframeWidth;
    // Setze den Skalierungsfaktor als CSS-Variable
    iframe.style.setProperty('--scale', scale);
    iframe.style.transform = `scale(${scale})`;
    // Passe die Höhe an, um den Inhalt vollständig sichtbar zu machen
    iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight * scale}px`;
  }
  // Initiale Anpassung, wenn die Seite geladen wird
  window.addEventListener('load', adjustIframeScale);


  // Skalierung erneut anpassen, wenn die Größe des Viewports geändert wird
  window.addEventListener('resize', adjustIframeScale);
</script>




Version vom 15. Januar 2025, 21:50 Uhr


Variante: Aufruf von GOV mit Iframe und "show"

Variante: responsiv

 <style>
   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }

   .iframe-wrapper {
     width: 100vw; /* Volle Breite des Viewports */
     height: 100vh; /* Volle Höhe des Viewports */
     overflow: hidden; /* Überschüssige Inhalte ausblenden */
     position: relative; /* Container für absolutes Positionieren */
   }

   iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%; /* Standardbreite */
     height: 100%; /* Standardhöhe */
     transform-origin: top left; /* Skalierung ab der oberen linken Ecke */
     transform: scale(1); /* Standard-Skalierung */
   }

   /* Media Queries für kleinere Bildschirme */
   @media (max-width: 768px) {
     iframe {
       transform: scale(0.8); /* Skaliere das iframe-Inhalte */
       width: 125%; /* Kompensiere die Skalierung, um die Breite zu erhalten */
       height: 125%; /* Gleiche Relation wie Breite */
     }
   }

   @media (max-width: 480px) {
     iframe {
       transform: scale(0.7); /* Noch stärkere Skalierung */
       width: 143%; /* Entsprechend der Skalierung erhöhen */
       height: 143%; /* Höhe bleibt proportional */
     }
   }
 </style>





Abgerufen von „https://altes-koeln.de/index.php?title=Widget:GOV-Test&oldid=77847“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.