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>
