Realmente no tiene acceso al tamaño del contenido dentro del iframe, por lo que su mejor opción es elegir una proporción que le gustaría que fuera el iframe y forzarlo. Por ejemplo, un gran caso de uso es el video incrustado, donde es probable que desee una relación de 16: 9.
Hay un gran truco útil para hacer esto, que usa un contenedor con la relación y luego hace que el iframe se posicione en tamaño absoluto y completo. Así es cómo:
- ¿Cuál es la mejor manera de obtener vínculos de retroceso 'Do-follow' para mi sitio web de dinero?
- ¿Cuál es el mejor servicio de administración de etiquetas? ¿Existe el riesgo de que un tercero aloje sus etiquetas?
- ¿Son fáciles de aprender los marcos CSS / HTML una vez que conoces el núcleo HTML / CSS?
- ¿Cuáles son las cinco bibliotecas de Javascript más útiles que utiliza como desarrollador de Javascript?
- Cómo determinar qué 4 puntos de interrupción son la mejor opción para mi sitio web
.empotrar
{
posición: relativa;
relleno inferior: 56.25%;
}
iframe
{
posición: absoluta;
arriba: 0; izquierda: 0;
ancho: 100%; altura: 100%;
}
Aquí hay un Codepen (Wwwwvj)
Explicación rápida:
El fondo del relleno es una buena idea porque los porcentajes de relleno provienen del ancho del elemento. Entonces, en este caso, el relleno inferior será el 56.25% del ancho del elemento, es decir, 16: 9 o 9/16 * 100.
Esto nos da una caja. Luego hacemos que la posición del iframe sea absoluta y llenamos el cuadro.
Puede cambiar el valor de 56.25 a lo que necesite según el contenido con el que esté buscando llenarlo. Incluso puede cambiar ese valor de acuerdo con las consultas de los medios o vivir con javascript en respuesta a un evento. En todos los casos, la altura respetará la relación que ha definido.
