Si at du ønsket å legge CSS-Triks nettside i en <iframe>. Du vil gjøre det som dette:
<iframe src="https://css-tricks.com"></iframe>Uten noen andre styling, vil du få et rektangel, som er 300 x 150 piksler. Det er ikke engang i User Agent «stylesheet», det er bare noen magiske ting om iframes (og objekter). Det er nesten helt sikkert ikke hva du ønsker, så vil du ofte se bredde og høyde attributter til høyre på iframe seg selv (YouTube gjør dette).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>Disse attributtene er god å ha., Det er en start mot reservere noen plass for iframe som er mye nærmere hvordan det kommer til å ende opp. Husk, layout jank er dårlig. Men vi har mer arbeid å gjøre, siden de er faste numre, snarere enn en responsiv-vennlig oppsett.
Det beste trikset for responsive iframes, for nå, er å lage et sideforhold boksen. Først trenger du en forelder element med en relativ posisjonering. Iframe-er barnet element i det, som du bruker absolutt posisjonering til for å fylle området., Den vanskelige delen er at den overordnede element blir perfekt høyde for ved å opprette en pseudo-element for å presse den til den høyden som er basert på størrelsesforholdet. Hele poenget med det er som å skyve-element til riktig størrelse, er et bedre system enn å tvinge en viss høyde. I scenario der innholdet inne er høyere enn hva størrelsesforholdet står for, det kan fortsatt vokse snarere enn overløp.
jeg vil bare sette et komplett demo her (som fungerer for bilder også):
Se Pen
Responsive Iframe av Chris Coyier (@chriscoyier)
på CodePen.,
Hver gang vi arbeider med størrelsesforhold, det får meg til å tenke på en framtid med bedre håndtering for det. Det er den eksperimentelle intrinsicsize attributt som jeg kunne tenke meg å være ganske hyggelig for iframes i tillegg til bilder. Pluss at det er forhåpentligvis-vil-eksisterer-snart aspect-ratio i CSS og ideen om at det kunne standard for å bruke width og height attributtene for elementet, som jeg håper vil utvide til iframes.