sig du ønskede at sætte CSS-Tricks hjemmeside i en <iframe>. Du ville gøre det sådan:
<iframe src="https://css-tricks.com"></iframe>uden anden styling får du et rektangel, der er 300.150 pi .els i størrelse. Det er ikke engang i User Agent stylesheet, det er bare nogle magiske ting om iframes (og objekter). Det er næsten helt sikkert ikke, hvad du vil, så du vil ofte se bredde og højde attributter lige på selve iframe (YouTube gør dette).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>disse attributter er gode at have., Det er en start mod at reservere noget plads til iframe, der er meget tættere på, hvordan det kommer til at ende. Husk, layout jank er dårlig. Men vi har mere arbejde at gøre, da det er faste tal, snarere end en lydhør-venlig opsætning.
det bedste trick til responsive iframes, for nu, er at lave en billedformatboks. Først har du brug for et forældreelement med relativ positionering. Iframe er barnets element inde i det, som du anvender absolut positionering til for at fylde området., Den vanskelige del er, at forældreelementet bliver den perfekte højde ved at oprette et pseudo-element for at skubbe det til den højde baseret på billedformatet. Hele pointen med det er, at skubbe elementet til den rigtige størrelse er et pænere system end at tvinge en bestemt højde. I scenariet, hvor indholdet indeni er højere end hvad billedforholdet tegner sig for, kan det stadig vokse snarere end overløb.
jeg vil lige lægge en komplet demo lige her (der virker for billeder, der er for):
Se Pennen
Lydhør Iframe af Chris Coyier (@chriscoyier)
på CodePen.,
hver gang vi beskæftiger os med billedforhold, får det mig til at tænke på en fremtid med bedre håndtering af det. Der er den eksperimentelle intrinsicsize attribut, som jeg kunne forestille mig at være ganske rart for iframes ud over billeder. Plus der er forhåbentlig-skal-findes-snart aspect-ratio i CSS og den idé, at det kunne standard for at bruge width og height attributter på det element, som jeg håber vil udvide til iframes.