Nehmen wir an, Sie möchten die CSS-Tricks-Website in einem <iframe> einbetten. Das würden Sie so machen:
<iframe src="https://css-tricks.de"></iframe>Ohne weitere Formatierung erhalten Sie ein Rechteck von 300×150 Pixeln. Das ist nicht einmal im User-Agent-Stylesheet enthalten, es ist nur eine magische Sache bei iframes (und Objekten). Das ist mit ziemlicher Sicherheit nicht das, was Sie wollen, daher sehen Sie oft width und height Attribute direkt am iframe selbst (YouTube macht das).
<iframe
width="560"
height="315"
src="https://css-tricks.de"></iframe>Diese Attribute sind gut zu haben. Es ist ein erster Schritt, um Platz für den iframe zu reservieren, der dem Endergebnis viel näher kommt. Denken Sie daran, dass Layout-Jank schlecht ist. Aber wir haben noch mehr zu tun, da dies feste Zahlen sind und keine responsivefreundliche Einrichtung.
Der beste Trick für responsive iframes ist derzeit die Erstellung einer "Aspect Ratio Box". Zuerst benötigen Sie ein übergeordnetes Element mit relativer Positionierung. Der iframe ist das untergeordnete Element darin, dem Sie eine absolute Positionierung geben, um den Bereich zu füllen. Der knifflige Teil ist, dass das übergeordnete Element die perfekte Höhe erhält, indem ein Pseudo-Element erstellt wird, das es basierend auf dem Seitenverhältnis auf diese Höhe drückt. Der Sinn der Sache ist, dass das Drücken des Elements auf die richtige Größe ein besseres System ist als das Erzwingen einer bestimmten Höhe. In dem Szenario, in dem der Inhalt darin höher ist als das Seitenverhältnis vorsieht, kann er immer noch wachsen, anstatt überzulaufen.
Ich füge hier eine vollständige Demo ein (die auch für Bilder funktioniert)
Siehe den Pen
Responsive Iframe von Chris Coyier (@chriscoyier)
auf CodePen.
Jedes Mal, wenn wir mit Seitenverhältnissen zu tun haben, denke ich an eine Zukunft mit besserer Handhabung dafür. Es gibt das experimentelle Attribut intrinsicsize, das ich mir für iframes zusätzlich zu Bildern gut vorstellen kann. Außerdem gibt es das hoffentlich bald existierende aspect-ratio in CSS und die Idee, dass es standardmäßig die Attribute width und height auf dem Element verwendet, was sich hoffentlich auch auf iframes erstrecken würde.
Was ist mit dem alten Padding-Top-Ansatz? https://benmarshall.me/responsive-iframes/
Das ist genau das, nur ein bisschen fehlertoleranter und einfacher anzupassen.
Moment mal... ist Bens Marshalls Website eine Kopie von CSS Tricks mit anderen Farben?
Vielen Dank,
Nützliche Tipps, aber kann ich
width=”560″durchwidth=”100%”ersetzen?Sicher. Das ist responsive in dem Sinne, dass die Breite dem Container entspricht, aber es wird nicht mit einem bestimmten Seitenverhältnis skaliert.
Probieren Sie es einfach aus! Es hat bei mir funktioniert.
Denken Sie daran, dass iframes in Browsern eine Mindesthöhe von 150 Pixeln haben, es sei denn, Sie geben ihnen explizit eine kleinere Höhe. Deshalb verwende ich für meine responsive iframes (Anzeigen)
heightanstelle vonpadding.Ich benutze immer noch Fitvids. Ich liebe es, dass ich es hinzufügen kann und nie darüber nachdenken muss. Auch Kunden müssen keine CSS-Kenntnisse haben. Ich weiß, es ist eine weitere Sache, die geladen werden muss, und es ist irgendwie ein alter Weg, es zu tun, aber es ist so einfach und unkompliziert.
Hervorragende Lösung für ein lästiges Problem.
Vielen Dank.
Ich habe die obige Methode ausprobiert und obwohl sie funktionierte, hat sie etwas anderes kaputt gemacht. Also habe ich stattdessen dies versucht, und es funktioniert für mich gut. Ich benutze übrigens Zurb Foundation 6.
iframe
{
@media screen and (max-width: 39.9375em)
{
width: 100%;
height: 100%;
}
}