říkají, že jste chtěli umístit webové stránky CSS-Tricks do <iframe>. Udělali byste to takto:
<iframe src="https://css-tricks.com"></iframe>bez jakéhokoli jiného stylu byste dostali obdélník o velikosti 300×150 pixelů. To není ani ve stylu uživatelského agenta, je to jen nějaká magická věc o iframes (a objektech). To téměř jistě není to, co chcete, takže často uvidíte atributy šířky a výšky přímo na samotném iframe (YouTube to dělá).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>tyto atributy je dobré mít., Je to začátek vyhrazení nějakého prostoru pro iframe, který je mnohem blíže tomu, jak to skončí. Pamatujte, že rozložení jank je špatné. Ale máme více práce, protože to jsou pevná čísla, spíše než citlivé nastavení.
nejlepším trikem pro citlivé Iframy je prozatím vytvoření pole poměru stran. Nejprve potřebujete nadřazený prvek s relativním umístěním. Iframe je dětský prvek uvnitř, na který aplikujete absolutní umístění, abyste vyplnili oblast., Choulostivá část spočívá v tom, že rodičovský prvek se stává dokonalou výškou vytvořením pseudo-prvku, který jej posune do této výšky na základě poměru stran. Celá věc je, že posunutí prvku na správnou velikost je hezčí systém než vynucení určité výšky. Ve scénáři, kde je obsah uvnitř vyšší než to, co představuje poměr stran, může stále růst spíše než přetečení.
já si jen dát kompletní demo tady (která funguje pro obrazy příliš):
Viz Pen
Reagovat Iframe Chris Coyier (@chriscoyier)
na CodePen.,
pokaždé, když se zabýváme poměry stran, nutí mě to myslet na budoucnost s lepší manipulací. Existuje experimentální atribut intrinsicsize, který si dokážu představit, že je pro iframes kromě obrázků docela pěkný. Plus tam je snad-bude-existují-brzy aspect-ratio v CSS a představa, že by to mohlo default používání width height atributy na prvek, který doufám, že by se rozšířily do prvků iframe.