Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 5: | Zeile 5: | ||
<iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe> | <iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe> | ||
</div> | </div> | ||
<h1>Variante: responsiv</h1> | |||
<style> | |||
body { | |||
margin: 0; | |||
padding: 0; | |||
font-family: Arial, sans-serif; | |||
} | |||
.iframe-container { | |||
width: 100%; /* Container passt sich an die Breite des Viewports an */ | |||
overflow: hidden; /* Inhalte außerhalb des Containers werden ausgeblendet */ | |||
position: relative; /* Wichtig für absolute Positionierung des iframes */ | |||
padding-top: 160%; /* Vermutetes Seitenverhältnis */ | |||
} | |||
iframe { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; /* Standardbreite des iframes */ | |||
height: 100%; /* Höhe passend zum Container */ | |||
border: none; | |||
} | |||
/* Media Queries für Smartphones */ | |||
@media (max-width: 768px) { | |||
.iframe-container { | |||
transform: scale(0.9); /* Verkleinere das gesamte iframe */ | |||
transform-origin: top left; /* Ursprung für die Skalierung */ | |||
width: 100%; /* Stelle sicher, dass die Breite des Containers bleibt */ | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.iframe-container { | |||
transform: scale(0.8); /* Noch kleinere Skalierung für sehr kleine Geräte */ | |||
transform-origin: top left; | |||
} | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="iframe-container"> | |||
<iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" allowfullscreen></iframe> | |||
</div> | |||
</body> | |||
</html> | |||
Version vom 15. Januar 2025, 20:35 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 passt sich an die Breite des Viewports an */ overflow: hidden; /* Inhalte außerhalb des Containers werden ausgeblendet */ position: relative; /* Wichtig für absolute Positionierung des iframes */ padding-top: 160%; /* Vermutetes Seitenverhältnis */ }
iframe { position: absolute; top: 0; left: 0; width: 100%; /* Standardbreite des iframes */ height: 100%; /* Höhe passend zum Container */ border: none; }
/* Media Queries für Smartphones */ @media (max-width: 768px) { .iframe-container { transform: scale(0.9); /* Verkleinere das gesamte iframe */ transform-origin: top left; /* Ursprung für die Skalierung */ width: 100%; /* Stelle sicher, dass die Breite des Containers bleibt */ } }
@media (max-width: 480px) { .iframe-container { transform: scale(0.8); /* Noch kleinere Skalierung für sehr kleine Geräte */ transform-origin: top left; } } </style>
</head> <body>
</body> </html>