Say you wanted to put the CSS-Tricks website in an <iframe>. Você faria isso assim:
<iframe src="https://css-tricks.com"></iframe>sem qualquer outro estilo, você teria um retângulo de 300×150 pixels de tamanho. Isso nem sequer está na folha de estilo do agente de usuário, é apenas uma coisa mágica sobre iframes (e objetos). Isso é quase de certeza que não é o que você quer, então você muitas vezes vai ver atributos de largura e altura no próprio iframe (YouTube faz isso).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>esses atributos são bons de se ter., É um começo para reservar algum espaço para o iframe que está muito mais perto de como ele vai acabar. Lembra-te, o “layout jank” é mau. Mas temos mais trabalho a fazer, já que esses são números fixos, em vez de uma configuração amigável.
O melhor truque para iframes responsivos, por agora, é fazer uma caixa de proporções. Primeiro você precisa de um elemento pai com posicionamento relativo. O iframe é o elemento-filho dentro dele, ao qual você aplica posicionamento absoluto a fim de preencher a área., A parte complicada é que o elemento pai se torna a altura perfeita, criando um pseudo-elemento para empurrá-lo para essa altura com base na proporção de aspecto. O ponto é que empurrar o elemento para o tamanho correto é um sistema melhor do que forçar uma certa altura. No cenário em que o conteúdo interior é mais alto do que o que a razão de aspecto representa, ele ainda pode crescer em vez de transbordar.
i’ll just put a complete demo right here (that works for images too):
See the Pen
Responsive Iframe by Chris Coyier (@chriscoyier)
on CodePen.,cada vez que lidamos com as proporções de aspecto, faz-me pensar num futuro com melhor tratamento para ele. Há o atributo experimental intrinsicsize que eu poderia imaginar ser muito bom para iframes, além de imagens. Além disso, há o tomara-vai-existe-em breve aspect-ratio no CSS e a ideia de que poderia padrão, para usar o width e height atributos no elemento, que eu espero que iria se estender para iframes.