Sagen, dass Sie die CSS-basierte Website in eine <iframe>. Sie würden das so machen:
<iframe src="https://css-tricks.com"></iframe>Ohne ein anderes Styling erhalten Sie ein Rechteck mit einer Größe von 300×150 Pixeln. Das ist nicht einmal im User Agent-Stylesheet, es ist nur eine magische Sache über Iframes (und Objekte). Das ist mit ziemlicher Sicherheit nicht das, was Sie wollen, daher werden Sie häufig Width-und height-Attribute direkt im Iframe selbst sehen (YouTube tut dies).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>Diese Attribute sind gut zu haben., Es ist ein Anfang, etwas Platz für den iframe zu reservieren, der viel näher dran ist, wie er enden wird. Denken Sie daran, layout jank ist schlecht. Aber wir haben mehr Arbeit zu tun, da es sich eher um feste Zahlen als um ein reaktionsschnelles Setup handelt.
Der beste Trick für reaktionsschnelle Iframes besteht im Moment darin, ein Seitenverhältnisfeld zu erstellen. Zuerst benötigen Sie ein übergeordnetes Element mit relativer Positionierung. Der iframe ist das untergeordnete Element darin, auf das Sie die absolute Positionierung anwenden, um den Bereich auszufüllen., Der schwierige Teil besteht darin, dass das übergeordnete Element zur perfekten Höhe wird, indem ein Pseudoelement erstellt wird, um es basierend auf dem Seitenverhältnis auf diese Höhe zu verschieben. Der springende Punkt ist, dass das Verschieben des Elements auf die richtige Größe ein schöneres System ist, als eine bestimmte Höhe zu erzwingen. In dem Szenario, in dem der Inhalt im Inneren größer ist als das Seitenverhältnis, kann er immer noch wachsen und nicht überlaufen.
Ich werde hier einfach eine vollständige Demo einfügen (die auch für Bilder funktioniert):
Siehe den Stift
Responsive Iframe von Chris Coyier (@chriscoyier)
auf CodePen.,
Jedes Mal, wenn wir uns mit Seitenverhältnissen befassen, denke ich an eine Zukunft mit besserer Handhabung. Es gibt das experimentelleintrinsicsize – Attribut, das ich mir vorstellen kann, zusätzlich zu Bildern für Iframes recht nett zu sein. Außerdem gibt es die hoffentlich bald existierende aspect-ratio in CSS und die Idee, dass standardmäßig die Attribute width und height für das Element verwendet werden könnten, von denen ich hoffe, dass sie sich auf iframes erstrecken.