zeggen dat u de CSS-Tricks-website in een <iframe>wilde plaatsen. Je zou dat als volgt doen:
<iframe src="https://css-tricks.com"></iframe>zonder enige andere styling krijg je een rechthoek met een grootte van 300×150 pixels. Dat is niet eens in de user Agent stylesheet, het is gewoon een magisch ding over iframes (en objecten). Dat is bijna zeker niet wat je wilt, dus je ziet vaak breedte en hoogte attributen recht op het iframe zelf (YouTube doet dit).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>deze kenmerken zijn goed om te hebben., Het is een begin in de richting van het reserveren van wat ruimte voor het iframe dat is een stuk dichter bij hoe het gaat eindigen. Vergeet niet, Lay-out jank is slecht. Maar we hebben meer werk te doen omdat dat vaste nummers zijn, in plaats van een responsieve-vriendelijke setup.
de beste truc voor responsieve iframes, voor nu, is het maken van een aspect ratio box. Eerst heb je een bovenliggend element met relatieve positionering nodig. Het iframe is het onderliggende element erin, waarop u absolute positionering toepast om het gebied te vullen., Het lastige is dat het bovenliggende element de perfecte hoogte wordt door een pseudo-element te creëren om het naar die hoogte te duwen op basis van de beeldverhouding. Het hele punt van het is dat het duwen van het element naar de juiste grootte is een mooier systeem dan het forceren van een bepaalde hoogte. In het scenario waar de inhoud binnen groter is dan wat de aspect ratio accounts voor, het kan nog steeds groeien in plaats van overflow.
Hier zet ik een complete demo (die ook voor afbeeldingen werkt):
zie de pen
responsieve Iframe van Chris Coyier (@chriscoyier)
Op CodePen.,
elke keer dat we te maken hebben met aspectratio ‘ s, doet het me denken aan een toekomst met een betere afhandeling. Er is het experimentele intrinsicsize attribuut waarvan ik me kan voorstellen dat het aardig is voor iframes naast images. Daarnaast is er de hopelijk-will-exist-soon aspect-ratio in CSS en het idee dat het standaard width en height attributen op het element zou kunnen gebruiken, wat naar ik hoop ook zou kunnen gelden voor iframes.