Responsive Objekte

Flexibel wie ein magischer Spiegel

Das <object>-Element ist wunderbar, wenn du verschiedenste Inhalte in deine Webseite einbetten willst, aber ohne das richtige CSS kann es sich manchmal stur wie ein alter Zauberspiegel verhalten, denn es passt einfach nicht ins Bild!

Doch keine Sorge, mit ein bisschen CSS-Magie wird dein <object> nicht nur hübsch, sondern auch schlau. Es reagiert flexibel auf jede Bildschirmgröße und fügt sich wie von selbst in dein Design ein. Ob Desktop oder kleiner Bildschirm-Zauberkasten – mit dem richtigen CSS bleibt dein eingebetteter Inhalt immer anmutig und elegant, als würde es von selbst wissen, wie viel Platz es braucht. So gibt es kein Gezicke mehr, nur noch fließende Übergänge!

Los geht’s

Objekte anpassen

Ein Objekt

das sich anpasst

Passe deine Objekte perfekt in ihre Umgebung an, so dass sie sich nahtlos in ihre Umgebung einfügen. Du kannst genauso vorgehen, wie du es bei I-Frames gelernt hast.

In diesem Beispiel nutzt du ein 16:9-Seitenverhältnis, das du mit padding-bottom: 56.25% erzielst. Das <object>-Element füllt dann den gesamten Container aus und passt sich flexibel an jede Bildschirmgröße an. Du kannst deinem Element auch zusätzliche Stile wie Rahmen oder Schatten verleihen, um es optisch ansprechend in dein Design einzubetten. So bleibt dein <object> immer schön responsiv und fügt sich elegant in deine Webseite ein, egal wie groß oder klein das Gerät deines Besuchers ist!

HTML

<div class="object-container">
    <object data="file.pdf" type="application/pdf">
    </object>
</div>

CSS

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* Für ein 16:9-Seitenverhältnis */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

In dieser Lektion hast du gelernt…

Wie du das <object>-Element responsiv machst, sodass eingebettete Inhalte sich flexibel an jede Bildschirmgröße anpassen.
Warum ein div-Container mit padding-bottom eine feste Seitenverhältnis-Proportion ermöglicht, sodass dein eingebettetes Objekt immer die richtige Größe hat.
Wie du mit position: absolute das <object>-Element perfekt in den Container einpasst, sodass es sich automatisch streckt oder verkleinert.
Wie du mit zusätzlichen Stilen wie Rahmen oder Schatten das <object> optisch ansprechend gestaltest, damit es sich harmonisch in dein Design einfügt.
Warum ein flexibles <object> besonders nützlich für PDFs oder interaktive Inhalte ist, damit sie auf jedem Gerät gut aussehen, ohne dass Nutzer zoomen oder scrollen müssen.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

Das Buch der Geheimnisse

Tief in der Bibliothek der Alten ruht ein Buch, das magische Geheimnisse birgt. Seine Seiten können nur durch ein digitales Portal betrachtet werden – und genau da kommst du ins Spiel. Nutze das <object>-Element, um ein PDF-Dokument geschickt in deine Seite einzubinden. Sorge dafür, dass es sich an jede Bildschirmgröße anpasst, denn nichts ruiniert den Zauber mehr als ein abgeschnittenes Geheimnis.

Deine Aufgabe: Die Einbettung und Gestaltung eines Objekts

Objekt einbinden:
Verwende das <object>-Element, um das PDF-Dokument einzubinden ( assets/media/elixir-of-light.pdf ), und setze die Attribute data (Pfad zur PDF-Datei) und type (application/pdf).
Responsive Gestaltung:
Verwende CSS, um das Objekt responsiv zu gestalten.
Tipp: Du musst Klassen und einen Umschließenden Container erstellen, dass es funktioniert.
Zusätzliche Stile anwenden:
Füge einen Rahmen (border) und einen box-shadow hinzu, um das eingebettete PDF visuell ansprechender zu gestalten.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!

Editor in neuem Tab öffnen

HTML

<div class="object-container">
    <object data="assets/media/elixir-of-light.pdf" type="application/pdf">
    </object>
</div>

CSS

.object-container {
    position: relative;
    width: 90%;
    padding-bottom: 56.25%;
    /* Für16:9-Seitenverhältnis */
    height: 0;
}

.object-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #333;
    /* Optional: Rahmen */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.591);
    /* Optional: Schatten */
}

Weiter geht’s