html - ejemplo - iframe size

¿Cómo puedo escalar el contenido de un iframe?

Question

¿Cómo puedo escalar el contenido de un iframe (en mi ejemplo es una página HTML y no es una ventana emergente) en una página de mi sitio web?

Por ejemplo, quiero mostrar el contenido que aparece en el iframe al 80% del tamaño original.

Answer 1

Acabo de probar y para mí, ninguna de las otras soluciones funcionó. Simplemente intenté esto y funcionó perfectamente en Firefox y Chrome, tal como esperaba:

<div class=''wrap''>
    <iframe ...></iframe>
</div>

y el css:

.wrap {
    width: 640px;
    height: 480px;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Esto escala todo el contenido en un 30%. Por supuesto, los porcentajes de ancho / altura deben ajustarse en consecuencia (1 / scale_factor).

Answer 2

Como he dicho, dudo que puedas hacerlo.
Tal vez usted pueda escalar al menos el texto mismo, estableciendo un font-size: 80%; estilo font-size: 80%; .
Sin probar, no estoy seguro de que funcione, y no cambiará el tamaño de cuadros o imágenes.

Answer 3

Creo que puedes hacer esto calculando la altura y el ancho que deseas con javascript (a través de document.body.clientWidth, etc.) y luego inyectando el iframe en tu HTML de esta manera:

var element = document.getElementById("myid"); element.innerHTML += "<iframe src=''http://www.google.com'' height=''200'' width=''" + document.body.clientWidth * 0.8 + "''/>";

No probé esto en IE6 pero parece funcionar con los buenos :)

Answer 4

Después de luchar con esto durante horas tratando de que funcione en IE8, 9 y 10, esto es lo que funcionó para mí.

Este CSS simplificado funciona en FF 26, Chrome 32, Opera 18 e IE9 -11 a partir del 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Para IE8, establezca el ancho / alto para que coincida con el iframe, y agregue -ms-zoom al contenedor contenedor .wrap:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Solo use su método favorito para rastrear el navegador para incluir condicionalmente el CSS apropiado, vea ¿Hay alguna manera de hacer un CSS condicional específico del navegador dentro de un archivo * .css? para algunas ideas

IE7 fue una causa perdida ya que -ms-zoom no existía hasta IE8.

Aquí está el HTML real que probé con:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Answer 5

Encontré una solución que funciona en IE y Firefox (al menos en las versiones actuales). En Safari / Chrome, el iframe se redimensiona al 75% de su tamaño original, pero el contenido dentro del iframe no se escala en absoluto. En la ópera, esto no parece funcionar. Esto se siente un poco esotérico, así que si hay una mejor manera de hacerlo, agradecería sugerencias.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Nota: tuve que usar el elemento wrap para Firefox. Por alguna razón, en Firefox, cuando reduce el tamaño del objeto en un 75%, todavía usa el tamaño original de la imagen por motivos de diseño. (Intente eliminar el div del código de ejemplo anterior y verá lo que quiero decir).

Encontré algo de esto de esta pregunta .

Answer 6

Esta fue mi solución en una página con un ancho de 890px

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

Answer 7

La solución #wrap #frame funciona bien, siempre que los números en #wrap sean #frame multiplicados por el factor de escala. Muestra solo esa parte del marco reducido. Puede verlo aquí reduciendo el tamaño de los sitios web y colocándolo en una forma similar a pinterest (con el complemento de jQuery de Woodmark):

http://www.genautica.com/sandbox/woodmark-index.html

Answer 8

Me doy cuenta de que la escala se realiza automáticamente cuando defino el ancho del contenedor (DIV principal) en la página de destino, no en píxeles, sino en y solo en porcentaje. Sucede automáticamente.

1. En mi caso lo defino para exmpl. Ancho de 480px para div donde se establecerá iframe. 2.Puse el 100% de ancho para iframe. 3. Configuro el 250% del ancho para el div principal en la página de destino (5 imágenes x 50% del ancho de la pantalla).

Mi intención es mostrar 2 imágenes (en ancho) en el marco, y exactamente lo que está sucediendo, en cada caso de ancho de marco.

¿Por qué funciona solo en porcentaje?

Answer 9

No creo que HTML tenga tal funcionalidad. Lo único que puedo imaginar que haría el truco es hacer un procesamiento del lado del servidor. Tal vez podría obtener una instantánea de la imagen de la página web que desea servir, escalarla en el servidor y entregarla al cliente. Esta sería una página no interactiva sin embargo. (Tal vez un mapa de imágenes podría tener el enlace, pero aún así.)

Otra idea sería tener un componente del lado del servidor que alteraría el HTML. Algo así como la función de zoom de Firefox 2.0. Por supuesto, esto no es un zoom perfecto, pero es mejor que nada.

Aparte de eso, me he quedado sin ideas.

Answer 10

No es necesario envolver el iframe con una etiqueta adicional. Solo asegúrate de aumentar el ancho y la altura del iframe en la misma cantidad de escalada en el iframe.

Por ejemplo, para escalar el contenido de iframe al 80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

Básicamente, para obtener el mismo iframe de tamaño necesita escalar las dimensiones.

Answer 11

Para aquellos de ustedes que tienen problemas para hacer que esto funcione en IE, es útil usar -ms-zoom como se sugiere a continuación y usar la función de zoom en #wrap div, no el id iframe . En mi experiencia, con la función de zoom tratando de escalar el div iframe de #frame , #frame el tamaño del iframe y no el contenido dentro de él (que es lo que está buscando).

Se ve como esto. Funciona para mí en IE8, Chrome y FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Answer 12

Pensé que compartiría lo que se me ocurrió, usando mucho de lo que se mencionó anteriormente. No he comprobado Chrome, pero funciona en IE, Firefox y Safari, por lo que puedo decir.

Las compensaciones específicas y el factor de zoom en este ejemplo funcionaron para reducir y centrar dos sitios web en iframes para las pestañas de Facebook (810px de ancho).

Los dos sitios utilizados fueron un sitio de wordpress y una red de Ning. No soy muy bueno con html, así que probablemente se podría haber hecho mejor, pero el resultado parece bueno.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Answer 13

Probablemente no sea la mejor solución, pero parece funcionar bien.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById(''myframe'').contentWindow.document.body.style = ''zoom:50%;'';};
</SCRIPT>

Obviamente, no se intenta arreglar el padre, solo se agrega el estilo "zoom: 50%" al cuerpo del niño con un poco de javascript.

Tal vez podría establecer el estilo del elemento "HTML", pero no lo intentó.

Answer 14

Seguimiento de la respuesta de lxs : noté un problema en el que las etiquetas de zoom y --webkit-transform al mismo tiempo parecen confundir a Chrome (versión 15.0.874.15) al hacer un efecto de doble zoom. Pude -ms-zoom el problema al reemplazar el zoom con -ms-zoom (orientado solo a IE), dejando que Chrome use solo la etiqueta --webkit-transform , y eso aclaró todo.

Answer 15

Si desea que el iframe y su contenido se amplíen cuando la ventana cambie de tamaño, puede configurar lo siguiente para el evento de cambio de tamaño de la ventana, así como el evento de carga de iframes.

function()
{
    var _wrapWidth=$(''#wrap'').width();
    var _frameWidth=$($(''#frame'')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$(''#frame'')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform=''scale(''+percent+'')'';
    frame.style.webkitTransformOrigin=''top left'';
    frame.style.MozTransform=''scale(''+percent+'')'';
    frame.style.MozTransformOrigin=''top left'';
    frame.style.oTransform=''scale(''+percent+'')'';
    frame.style.oTransformOrigin=''top left'';
  };

Esto hará que el iframe y su contenido se amplíen al 100% del ancho de la envoltura (o cualquier porcentaje que desee). Como un bono adicional, no tiene que configurar el css del marco a valores codificados, ya que todos se configurarán dinámicamente, solo tendrá que preocuparse de cómo desea que se muestre la división div.

He probado esto y funciona en Chrome, IE11 y Firefox.

Answer 16

Si su html está diseñado con css, probablemente pueda vincular diferentes hojas de estilo para diferentes tamaños.

Answer 17

html {zoom: 0.4;}? -)

Answer 18

La solución de Kip debería funcionar en Opera y Safari si cambia el CSS a:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

También es posible que desee especificar desbordamiento: oculto en #frame para evitar las barras de desplazamiento.