Widget:GoogleKalender: Unterschied zwischen den Versionen
Aus Seniorenbeirat Wilhelmshaven
Keine Bearbeitungszusammenfassung Markierung: Manuelle Zurücksetzung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<iframe src="https://calendar.google.com/calendar/embed? | <!DOCTYPE html> | ||
<html> | |||
<head> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<style> | |||
.container { | |||
position: relative; | |||
width: 100%; | |||
overflow: hidden; | |||
padding-top: 75%; /* 4:3 Aspect Ratio */ | |||
} | |||
.responsive-iframe { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
width: 100%; | |||
height: 100%; | |||
border: none; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h2>Responsive Iframe</h2> | |||
<h3>Maintain Aspect Ratio 4:3</h3> | |||
<p>Resize the window to see the effect.</p> | |||
<div class="container"> | |||
<iframe class="responsive-iframe" src="https://calendar.google.com/calendar/embed?wkst=1&bgcolor=%23ffffff&ctz=UTC&src=MWUyODRkNTUyZWRiN2ZmOThhNmE1NjcxMGIxNjhiOTIxYTJmMGVlMjNiN2RkMDc5Y2YyYWU2NDk5NDdjOWI0MEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=ZGUuZ2VybWFuI2hvbGlkYXlAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t&color=%23A79B8E&color=%230B8043" ></iframe> | |||
</div> | |||
</body> | |||
</html> | |||
Version vom 8. Dezember 2022, 11:46 Uhr
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container {
position: relative; width: 100%; overflow: hidden; padding-top: 75%; /* 4:3 Aspect Ratio */
}
.responsive-iframe {
position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none;
} </style> </head> <body>
Responsive Iframe
Maintain Aspect Ratio 4:3
Resize the window to see the effect.
<iframe class="responsive-iframe" src="https://calendar.google.com/calendar/embed?wkst=1&bgcolor=%23ffffff&ctz=UTC&src=MWUyODRkNTUyZWRiN2ZmOThhNmE1NjcxMGIxNjhiOTIxYTJmMGVlMjNiN2RkMDc5Y2YyYWU2NDk5NDdjOWI0MEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=ZGUuZ2VybWFuI2hvbGlkYXlAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t&color=%23A79B8E&color=%230B8043" ></iframe>
</body> </html>
