Hacer zoom sobre contenido de iframe con css

Compartir

Como escalar contenido de iframe con la propiedad zoom y scale de css.

En esta ocasión vamos a aprender a usar un iframe y escalar su contenido, es decir a pesar de que el iframe sea de una página completa podremos hacer que esta página se muestre como una más pequeña, es decir se mostrará todo el contenido sin cortar nada pero la ajustaremos con un factor para que quepa en nuestra página. El código sería el siguiente:

Código:

<!--[if IE]>
<iframe id="iframe" width="1200" scrolling="no" height="2850" frameborder="0" src="tu-dirección-url" style="zoom: 0.65;">&nbsp;</iframe>
<![endif]-->
<!--[if !IE]> -->
<iframe id="iframe" width="1200" scrolling="no" height="2850" frameborder="0" src="tu-dirección-url" style="-moz-transform: scale(0.65);-moz-transform-origin: 0 0;-o-transform: scale(0.65);-o-transform-origin: 0 0;-webkit-transform: scale(0.65);-webkit-transform-origin: 0 0;">&nbsp;</iframe>
<!-- <![endif]-->



Explicación:
tu-dirección-url: Es la dirección del enlace que quieres colocar en el iframe.

width="1200" y height="2850": Son las medidas reales de la página que colocaremos dentro del iframe.

zoom: 0.65: Es la proporción en que reduciremos el tamaño del iframe con respecto al tamaño de la página real. [Funciona para internet explorer].

scale(0.65): Es el factor de reducción del tamaño del iframe con respecto al tamaño real. [Funciona para el resto de los navegadores excepto internet explore].

scrolling="no": Indica que no aparecerán las barras de desplazamiento si quieres que aparezcan cambia por "yes".

Te ha gustado el post, por favor compartelo!!! Da click en el botón de arriba.

Ejemplo: