Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
(Änderung 77846 von Christopher (Diskussion) rückgängig gemacht.) Markierung: Rückgängigmachung |
Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
||
| Zeile 1: | Zeile 1: | ||
<!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> | <!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> | ||
<h1>Variante: | <h1>Variante: Einfacher Iframe</h1> | ||
<div style="width: 100%; height: 0; padding-bottom: 160%; position: relative;"> | <div style="width: 100%; height: 0; padding-bottom: 160%; position: relative;"> | ||
<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> | ||
| Zeile 53: | Zeile 53: | ||
<iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" allowfullscreen></iframe> | <iframe src="https://gov.genealogy.net/item/<!--{$CallType|escape:'url'}-->/<!--{$GOVID|escape:'url'}-->" allowfullscreen></iframe> | ||
</div> | </div> | ||
<!-- | <!-- | ||
Version vom 15. Januar 2025, 21:54 Uhr
Variante: Einfacher Iframe
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>