Diciamo che volevi mettere il sito web CSS-Tricks in un<iframe>. Lo faresti in questo modo:
<iframe src="https://css-tricks.com"></iframe>Senza nessun altro stile, otterrai un rettangolo di dimensioni 300×150 pixel. Questo non è nemmeno nel foglio di stile dell’agente utente, è solo una cosa magica sugli iframe (e sugli oggetti). Questo non è quasi certamente quello che vuoi, quindi vedrai spesso gli attributi di larghezza e altezza proprio sull’iframe stesso (YouTube lo fa).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>Questi attributi sono buoni da avere., È un inizio per riservare un po ‘ di spazio per l’iframe che è molto più vicino a come finirà. Ricorda, layout jank è cattivo. Ma abbiamo più lavoro da fare dal momento che quelli sono numeri fissi, piuttosto che una configurazione responsive-friendly.
Il miglior trucco per gli iframe reattivi, per ora, sta creando una scatola di proporzioni. Per prima cosa è necessario un elemento genitore con posizionamento relativo. L’iframe è l’elemento figlio al suo interno, a cui si applica il posizionamento assoluto per riempire l’area., La parte difficile è che l’elemento genitore diventa l’altezza perfetta creando uno pseudo-elemento per spingerlo a quell’altezza in base alle proporzioni. Il punto è che spingere l’elemento alla dimensione corretta è un sistema più bello che forzare una certa altezza. Nello scenario in cui il contenuto all’interno è più alto di quello che rappresenta il rapporto di aspetto, può ancora crescere piuttosto che traboccare.
Metterò una demo completa proprio qui (che funziona anche per le immagini):
Vedi la penna
Responsive Iframe di Chris Coyier (@chriscoyier)
su CodePen.,
Ogni volta che abbiamo a che fare con proporzioni, mi fa pensare a un futuro con una migliore gestione per questo. C’è l’attributo sperimentale intrinsicsize che potrei immaginare di essere abbastanza bello per gli iframe oltre alle immagini. Inoltre c’è la speranza-will-exist-soon aspect-ratio in CSS e l’idea che potrebbe usare di default gli attributi width e height sull’elemento, che spero si estenderebbe agli iframe.