spuneți că ați vrut să puneți site-ul CSS-Tricks într-un<iframe>. Ai face asta astfel:
<iframe src="https://css-tricks.com"></iframe>fără orice alt stil, ai obține un dreptunghi cu dimensiunea de 300×150 pixeli. Asta nu este chiar în foaia de stil a agentului utilizator, este doar un lucru magic despre iframe (și obiecte). Aproape sigur nu este ceea ce doriți, așa că veți vedea adesea atributele de lățime și înălțime chiar pe iframe în sine (YouTube face acest lucru).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>aceste atribute sunt bune pentru a avea., Este un început spre rezervarea unui spațiu pentru iframe care este mult mai aproape de modul în care va ajunge. Amintiți-vă, aspectul jank este rău. Dar avem mai mult de lucru, deoarece acestea sunt numere fixe, mai degrabă decât o configurare receptiv-friendly.
cel mai bun truc pentru iframe-uri receptive, deocamdată, face o casetă de raport de aspect. Mai întâi aveți nevoie de un element părinte cu poziționare relativă. Iframe este elementul copil din interiorul acestuia, căruia îi aplici poziționarea absolută pentru a umple zona., Partea dificilă este că elementul părinte devine înălțimea perfectă prin crearea unui pseudo-element care să-l împingă la acea înălțime pe baza raportului de aspect. Ideea este că împingerea elementului la dimensiunea corectă este un sistem mai frumos decât forțarea unei anumite înălțimi. În scenariul în care conținutul din interior este mai înalt decât ceea ce reprezintă raportul de aspect, acesta poate crește mai degrabă decât să se revarsă.
voi pune doar un demo complet aici (care lucrează pentru imagini prea):
Vezi Pen
Receptiv Iframe de Chris Coyier (@chriscoyier)
pe CodePen.,
de fiecare dată când avem de-a face cu rapoarte de aspect, mă face să mă gândesc la un viitor cu o manipulare mai bună pentru el. Există atributul experimental intrinsicsize care mi-aș putea imagina că este destul de frumos pentru iframe-uri în plus față de imagini. În Plus este să sperăm-vor-exista-în curând aspect-ratio în CSS și ideea că acesta ar putea implicit să utilizați width și height atribute pe element, pe care sper s-ar extinde la iframe.