Altes Köln

Widget:GOV-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
VisuellWikitext
(Änderung 77848 von Christopher (Diskussion) rückgängig gemacht.)
Markierung: Rückgängigmachung
Keine Bearbeitungszusammenfassung
Zeile 8: Zeile 8:
<h1>Variante: responsiv</h1>
<h1>Variante: responsiv</h1>


  <style>
<style>
     body {
     body {
       margin: 0;
       margin: 0;
Zeile 15: Zeile 15:
     }
     }


     .iframe-wrapper {
     .iframe-container {
       width: 100vw; /* Volle Breite des Viewports */
       width: 100%; /* Container hat immer die volle Breite des Viewports */
       height: 100vh; /* Volle Höhe des Viewports */
       position: relative; /* Wichtig für absolute Positionierung */
       overflow: hidden; /* Überschüssige Inhalte ausblenden */
       padding-top: 56.25%; /* Seitenverhältnis 16:9 */
      position: relative; /* Container für absolutes Positionieren */
 
     }
     }


Zeile 26: Zeile 26:
       top: 0;
       top: 0;
       left: 0;
       left: 0;
       width: 100%; /* Standardbreite */
       width: 100vw; /* Breite des Viewports */
       height: 100%; /* Standardhöhe */
       height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
       transform-origin: top left; /* Skalierung ab der oberen linken Ecke */
       transform-origin: top left; /* Skalierung startet oben links */
      transform: scale(1); /* Standard-Skalierung */
     }
     }


Zeile 35: Zeile 34:
     @media (max-width: 768px) {
     @media (max-width: 768px) {
       iframe {
       iframe {
         transform: scale(0.8); /* Skaliere das iframe-Inhalte */
         transform: scale(0.9); /* Skaliere den iframe-Inhalt */
        width: 125%; /* Kompensiere die Skalierung, um die Breite zu erhalten */
        height: 125%; /* Gleiche Relation wie Breite */
       }
       }
     }
     }
Zeile 43: Zeile 40:
     @media (max-width: 480px) {
     @media (max-width: 480px) {
       iframe {
       iframe {
         transform: scale(0.7); /* Noch stärkere Skalierung */
         transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
        width: 143%; /* Entsprechend der Skalierung erhöhen */
        height: 143%; /* Höhe bleibt proportional */
       }
       }
     }
     }

Version vom 15. Januar 2025, 21:59 Uhr


Variante: Aufruf von GOV mit Iframe und "show"

Variante: responsiv

<style> 

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

   .iframe-container {
     width: 100%; /* Container hat immer die volle Breite des Viewports */
     position: relative; /* Wichtig für absolute Positionierung */
     padding-top: 56.25%; /* Seitenverhältnis 16:9 */
  
   }

   iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw; /* Breite des Viewports */
     height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
     transform-origin: top left; /* Skalierung startet oben links */
   }

   /* Media Queries für kleinere Bildschirme */
   @media (max-width: 768px) {
     iframe {
       transform: scale(0.9); /* Skaliere den iframe-Inhalt */
     }
   }

   @media (max-width: 480px) {
     iframe {
       transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
     }
   }
 </style>





Abgerufen von „https://admiring-ritchie.45-83-104-238.plesk.page/index.php?title=Widget:GOV-Test&oldid=77850“
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.