Altes Köln

Widget:GOV-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
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-container {
     .iframe-wrapper {
       width: 100%; /* Container hat immer die volle Breite des Viewports */
       width: 100vw; /* Volle Breite des Viewports */
       position: relative; /* Wichtig für absolute Positionierung */
       height: 100vh; /* Volle Höhe des Viewports */
      padding-top: 56.25%; /* Seitenverhältnis 16:9 */
       overflow: hidden; /* Überschüssige Inhalte ausblenden */
       overflow: hidden; /* Überschüssige Inhalte ausblenden */
      position: relative; /* Container für absolutes Positionieren */
     }
     }


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


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

Version vom 15. Januar 2025, 20:47 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>
 





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.