Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| 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 mit <!--{$CallType|escape:'url'}--></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> | ||
</div> | </div> | ||
<h1>Variante: responsiv</h1> | <h1>Variante: responsiv mit <!--{$CallType|escape:'url'}--></h1> | ||
<style> | <style> | ||
Version vom 15. Januar 2025, 22:02 Uhr
Variante: Einfacher iframe mit
Variante: responsiv mit
<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>