Cómo escalar o hacer zoom en un iframe

diseno.jpg
Solucionex
08
Ene 15

Hoy os contamos un pequeño truco por si os puede ser de utilidad en algún momento. Hace unas semanas uno de nuestros clientes nos solicitó insertar un iframe de un servicio externo en una de las columnas de su web. El problema era que el tamaño del contenido del iframe era ligeramente mayor al ancho de la columna en la que se iba a incrustar. La diferencia era pequeña, apenas unos píxeles, pero lo suficiente para que no cupiera todo el contenido del iframe.

Para resolverlo, utilizamos un sencillo truco consistente en "escalar" o hacer "zoom inverso" al contenido del iframe, para ello le aplicamos los siguientes estilos CSS a la etiqueta iframe:

zoom: 0.89; -moz-transform: scale(0.89); -moz-transform-origin: 0 0; -o-transform: scale(0.89); -o-transform-origin: 0 0; -webkit-transform: scale(0.89); -webkit-transform-origin: 0 0;

 

Y listo! con eso conseguimos reducir el contenido del iframe a un 89% de su tamaño real y pudimos encajarlo en la columna sin que el usuario final percibiera nada raro.

Espero que os resulte útil!