dicen que querías poner el sitio web CSS-Tricks en un <iframe>. Lo harías así:
<iframe src="https://css-tricks.com"></iframe>sin ningún otro estilo, obtendrías un rectángulo de 300×150 píxeles de tamaño. Eso ni siquiera está en la hoja de estilos del agente de usuario, es solo algo mágico sobre los iframes (y los objetos). Es casi seguro que eso no es lo que quieres, por lo que a menudo verás los atributos width y height directamente en el iframe (YouTube hace esto).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>esos atributos son buenos para tener., Es un comienzo para reservar algo de espacio para el iframe que está mucho más cerca de cómo va a terminar. Recuerda, layout jank es malo. Pero tenemos más trabajo que hacer, ya que esos son números fijos, en lugar de una configuración amigable con la respuesta.
el mejor truco para Iframes responsivos, por ahora, es hacer una caja de relación de aspecto. Primero necesita un elemento padre con posicionamiento relativo. El iframe es el elemento secundario dentro de él, al que se aplica el posicionamiento absoluto para llenar el área., La parte difícil es que el elemento padre se convierte en la altura perfecta mediante la creación de un pseudo-elemento para empujarlo a esa altura en función de la relación de aspecto. El punto de esto es que empujar el elemento al tamaño correcto es un sistema más agradable que forzar una cierta altura. En el escenario donde el contenido interior es más alto de lo que representa la relación de aspecto, todavía puede crecer en lugar de desbordarse.
simplemente pondré una demostración completa aquí (que también funciona para imágenes):
vea el iframe responsivo de Chris Coyier (@chriscoyier)
en CodePen.,
cada vez que estamos lidiando con relaciones de aspecto, me hace pensar en un futuro con un mejor manejo para ello. Existe el atributo experimental intrinsicsize que me imagino que es bastante bueno para iframes además de imágenes. Además, existe el esperanzadamente-existirá-pronto aspect-ratio en CSS y la idea de que podría usar por defecto los atributos width y height en el elemento, que espero que se extienda a iframes.