Say you wanted to put the CSS-Tricks website in an <iframe>. Ezt így tenné:
<iframe src="https://css-tricks.com"></iframe>bármilyen más stílus nélkül 300×150 pixel méretű téglalapot kapna. Ez még csak nem is a Felhasználói ügynök stíluslapján, ez csak valami varázslatos dolog az iframes (and objects). Ez szinte biztosan nem az, amit akarsz, ezért gyakran látni fogod a szélesség és magasság attribútumokat közvetlenül az iframe-en (a YouTube ezt teszi).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>ezek az attribútumok jó., Ez egy kezdet felé foglal némi helyet az iframe, hogy sokkal közelebb van, hogy hogyan fog a végén. Ne feledje, hogy az elrendezés rossz. De több dolgunk van, mivel ezek rögzített számok, nem pedig érzékenybarát beállítás.
a reszponzív iframes legjobb trükkje egyelőre egy képarány doboz készítése. Először egy relatív pozicionálással rendelkező szülő elemre van szüksége. Az iframe a benne lévő gyermekelem, amelyre abszolút pozicionálást alkalmaz a terület kitöltése érdekében., A trükkös rész az, hogy a szülőelem tökéletes magassággá válik egy pszeudo-elem létrehozásával, amely a képarány alapján erre a magasságra tolja. Az egész lényege, hogy az elem megfelelő méretre való nyomása szebb rendszer, mint egy bizonyos magasság kényszerítése. Abban a forgatókönyvben, amikor a belső tartalom magasabb, mint amit a képarány jelent, továbbra is növekedhet, nem pedig túlcsordulhat.
csak egy teljes demót teszek ide (ez a képeknél is működik):
lásd a tollat
reagáló Iframe Chris Coyier (@chriscoyier)
a CodePen-en.,
minden alkalommal, amikor a képarányokkal foglalkozunk,eszembe jut egy olyan jövő, amelynek jobb kezelése van. Van egy kísérleti intrinsicsize attribútum, amelyet el tudtam képzelni, hogy a képek mellett az iframe-ek is nagyon kedvesek. Plusz ott van a remélhetőleg-will-exist-soon aspect-ratio A CSS-ben, és az a gondolat, hogy alapértelmezés szerint a width és attribútumokat használhatja az elemen, amelyek remélem kiterjednek az iframes-re.