säg att du ville sätta CSS-Tricks webbplats i en<iframe>. Du skulle göra så här:
<iframe src="https://css-tricks.com"></iframe>utan någon annan styling skulle du få en rektangel som är 300×150 pixlar i storlek. Det är inte ens i användaragenten stilmall, det är bara en magisk sak om iframes (och objekt). Det är nästan säkert inte vad du vill, så du ser ofta bredd och höjd attribut direkt på iframe själv (YouTube gör detta).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>dessa attribut är bra att ha., Det är en början mot att reservera lite utrymme för Iframe som är mycket närmare hur det kommer att sluta. Kom ihåg att layout jank är dålig. Men vi har mer arbete att göra eftersom det är fasta nummer, snarare än en responsiv vänlig inställning.
det bästa tricket för responsiva iframes är för närvarande att göra en bildförhållande låda. Först behöver du ett föräldraelement med relativ positionering. Iframe är barnet elementet inuti det, som du tillämpar absolut positionering till för att fylla området., Den knepiga delen är att förälderelementet blir den perfekta höjden genom att skapa ett pseudo-element för att driva det till den höjden baserat på bildförhållandet. Hela poängen med det är att trycka elementet till rätt storlek är ett trevligare system än att tvinga en viss höjd. I scenariot där innehållet inuti är högre än vad bildförhållandet står för kan det fortfarande växa snarare än överflöde.
Jag ska bara sätta en komplett demo här (som fungerar för bilder också):
se pennan
Responsive iframe av Chris Coyier (@chriscoyier)
på CodePen.,
varje gång vi har att göra med aspektförhållanden, det får mig att tänka på en framtid med bättre hantering för det. Det finns det experimentellaintrinsicsize – attributet som jag kan tänka mig att vara ganska trevligt för Iframes förutom bilder. Plus det finns förhoppningsvis-kommer-att existera-snart aspect-ratio I CSS och tanken att det kan standard att användawidth ochheight attribut på elementet, vilket jag hoppas skulle sträcka sig till Iframes.