¿Hay alguna manera de reducir lo que hay dentro de un iframe sin ajustar css?posible reducir el contenido del iframe?
cualquier parámetro mágico 'zoom' por ahí? !!!
Tengo un iframe vista previa 600px quiero encajar en un sitio 1000px y sin barras de desplazamiento ...
no tengo miedo. Su única opción sería usar modificadores de CSS específicos del sitio para reducir el tamaño de la fuente y el elemento.
Bueno, en fin, no.
Puede utilizar CSS en línea para fijar la anchura/altura de 600px y luego también establecer el overflow:hidden
Ah cierto - mi suposición fue que el póster quería que el sitio ENTERO fuera visible. – Seidr
Bueno, asumí lo mismo realmente.Con suerte, no quiere reducir el sitio para que quepa en la vista previa más pequeña. Eso no se puede hacer ... menos se hace una representación del lado del servidor de una página, se guarda el resultado, se reduce, etc. etc. – thecoshman
, se puede reducir el tamaño del sitio para que quepa en el iframe, el lado del cliente, el cfr. mi respuesta a continuación :) – futtta
Si controla el marco flotante de contenido, es posible encontrar este pequeño truco mío útil: http://futtta.be/squeezeFrame/
Es una cosa javascript independiente entre navegadores que intenta ajustar automáticamente el tamaño de la página a la que se llama desde el tamaño disponible del iframe utilizando css zoom y moz-transform.
CSS3 puede manejar esto. Este pequeño código debe manejar la mayoría de los navegadores o simplemente reducirlo para satisfacer sus necesidades. No hay necesidad de "ajustar" cualquier CSS existente:
iframe {
-moz-transform: scale(0.25, 0.25);
-webkit-transform: scale(0.25, 0.25);
-o-transform: scale(0.25, 0.25);
-ms-transform: scale(0.25, 0.25);
transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
O si quieres estilo en línea, por ejemplo, acaba de Firefox:
<style>
#IDNAME {
-moz-transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
}
</style>
Luego, por supuesto, simplemente añadir el ID a su iframe:
<iframe id="IDNAME" src="http://www.whatever.com"></iframe>
Brillante, y solución simple :) – Aaron
Nota importante: esto también cambia el tamaño del iframe completo, por lo que si desea mantener un tamaño definido, debe encargarse usted mismo. aquí hay un buen ejemplo usando la anchura/altura de desplazamiento: http://futtta.be/squeezeFrame/ –
Eso es bastante fácil, solo coloca el iframe en un div y fuerza el alto/ancho que desees. De esta forma, a medida que se reduce o se expande, no cambiará el formato de las páginas. –
Usted absolutamente puede hacer esto, muy bien.
único inconveniente es que necesita para transformar el iframe, y posicionarla absoluta:
iframe {
/* Set the width of the iframe the size you want to transform it FROM */
width: 1108px;
height: 710px;
/* apply the transform */
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
/* position it, as if it was the original size */
position: absolute;
left: -400px;
top: -200px;
}
Para ver un ejemplo mirar: http://jsfiddle.net/8DVNa/
Si la misma respuesta se aplica a dos preguntas diferentes, quizás esas preguntas sean idénticas . Podría haber marcado la pregunta como un duplicado en lugar de simplemente responderla nuevamente. –
Deberías haber obtenido mucho más crédito por esto. Funciona muy bien. – fmz
Tengo varios sitios de compras que he portado a mi nuevo sitio y después de la fijación del punto de enfoque view/vantage heres lo que tengo ... el sitio encaja muy bien dentro de mi iframe por página ... la diferencia de tamaño de la fuente es mejor que la cuestión de enfoque ... supongo fue una buena transacción de
#wrap {
width: 115%;
height: 2000px;
padding: 0;
overflow: hidden;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0px 75px;
-o-transform: scale(0.75);
-o-transform-origin: 0px 75px;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
#frame {
width: 115%;
height: 2000px;
overflow: hidden;
}
<div id="wrap">
<iframe id="frame" src="http://hempseedoilsoap.com/" scrolling="auto" align="center"></iframe>
</div>
Hay varias respuestas a continuación que muestran que se puede hacer. – fmz
Hablen sobre cómo resucitar a los muertos ... Si el usuario que hizo esta pregunta quiere cambiar su respuesta aceptada, puede hacerlo. No niego que, desde que proporcioné mi 'respuesta', se hayan desarrollado otras respuestas verdaderas. Dado que la brecha entre mi 'respuesta' se proporciona y una respuesta verdadera que se proporciona es de más de dos años, creo que se puede perdonar tanto mi respuesta como la falta de actualización sobre la cuestión del PO. – Seidr
Sin ofender. Simplemente estoy tratando de encontrar una solución de trabajo. Este no es un tema fácil y hay poca información útil. – fmz