Sano, että halusit laittaa CSS-Tricks verkkosivuilla <iframe>. Tekisitkö sen näin:
<iframe src="https://css-tricks.com"></iframe>Ilman, että muut tyyli, sinun pitäisi saada suorakulmion, joka on 300×150 pikseliä kooltaan. Se ei ole edes käyttäjän agentti stylesheet, se on vain jokin maaginen asia iframes (ja esineitä). Se ei ole juuri sitä mitä haluat, joten näet usein leveys-ja korkeus määritteitä aivan iframe itse (YouTube tekee tämän).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>Nämä määritteet ovat hyvä olla., Se on alku iframelle, joka on lähempänä sitä, miten se päätyy. Muista, että Jankin asettelu on huono. Mutta meillä on enemmän työtä, koska ne ovat kiinteitä numeroita, eikä reagoiva-ystävällinen setup.
paras temppu reagoiva iframe, nyt tekee kuvasuhde-valintaruutu. Ensin tarvitaan emoelementti, jossa on suhteellinen paikannus. Iframe on sen sisällä oleva lapsielementti, johon sovelletaan absoluuttista paikannusta alueen täyttämiseksi., Hankalinta on, että emoelementistä tulee täydellinen korkeus luomalla pseudoelementti, joka työntää sen kyseiseen korkeuteen kuvasuhteen perusteella. Koko asian ydin on se, että elementin työntäminen oikeaan kokoon on mukavampi järjestelmä kuin tietyn korkeuden pakottaminen. Skenaariossa, jossa sisällön sisällä on pitempi kuin mitä kuvasuhdetta osuus, se voi edelleen kasvaa kuin ylivuoto.
laitan täydellinen demo täällä (joka toimii kuvia liian):
Katso Kynän
Reagoiva Iframe Chris Coyier (@chriscoyier)
siitä, CodePen.,
joka kerta kun käsittelemme kuvasuhteita, se saa minut ajattelemaan tulevaisuutta, jossa sen käsittely on parempaa. Siellä on kokeellinen intrinsicsize ominaisuus, että voisin kuvitella, että melko mukavaa iframe lisäksi kuvia. Plus siellä on toivottavasti-on-olemassa-pian aspect-ratio CSS ja ajatus, että se voisi oletusarvo, jos haluat käyttää width ja height attribuutteja elementti, joka toivottavasti olisi laajentaa iframe.