Supongamos que desea poner el sitio web de Programar Plusen un <iframe>. Lo harías así:
<iframe src="https://css-tricks.com"></iframe>Sin ningún otro estilo, obtendría un rectángulo de 300 × 150 píxeles de tamaño. Eso ni siquiera está en la hoja de estilo del agente de usuario, es solo algo mágico sobre los iframes (y los objetos). Es casi seguro que eso no es lo que desea, por lo que a menudo verá los atributos de ancho y alto directamente en el iframe (YouTube hace esto).
<iframe
width="560"
height="315"
src="https://css-tricks.com"></iframe>Es bueno tener esos atributos. Es un comienzo para reservar algo de espacio para el iframe que está mucho más cerca de cómo terminará. Recuerde, el jank de diseño es malo. Pero tenemos más trabajo por hacer, ya que son números fijos, en lugar de una configuración receptiva.
El mejor truco para los iframes receptivos, por ahora, es hacer un cuadro de relación de aspecto. Primero necesitas un elemento padre con posicionamiento relativo. El iframe es el elemento secundario dentro de él, al que aplica un posicionamiento absoluto para llenar el área. La parte complicada es que el elemento principal se convierte en la altura perfecta al crear un pseudoelemento para empujarlo a esa altura en función de la relación de aspecto. El punto es que empujar el elemento al tamaño correcto es un sistema más agradable que forzar una cierta altura. En el caso de que el contenido interno sea más alto de lo que representa la relación de aspecto, aún puede crecer en lugar de desbordarse.
Solo pondré una demostración completa aquí (que también funciona para imágenes):
Ver la pluma
Iframe receptivo por Chris Coyier (@chriscoyier)
en CodePen.
Cada vez que nos enfrentamos a relaciones de aspecto, me hace pensar en un futuro con un mejor manejo. Existe el experimental intrinsicsize atributo que me imagino que es bastante bueno para iframes además de imágenes. Además, existe la esperanza de que exista pronto aspect-ratio en CSS y la idea de que podría utilizar de forma predeterminada el width y height atributos en el elemento, que espero se extienda a iframes.