Mostrar imagen en Iframe

Question

Quiero mostrar una imagen dentro de un iframe en mi página web. Sin embargo, el problema es que no puedo lograr que se expanda al 100% de su tamaño.

Lo que quiero hacer es lo siguiente.

• Tengo un iframe en mi página web.
• Llamar una imagen dentro del iframe.
• Haga que la imagen se expanda a tamaño completo y, como reacción, el iframe me permite desplazarme.
• no tiene ningún barras de desplazamiento en mi página web

Actualmente, aquí está el código que tengo:

echo"<iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'></iframe>"; 

Lo que esto hace es que, hace que el iframe vienen en la parte superior de mi página web y todavía no se expande al 100%. Si quito la posición: absoluta en lugar:

echo"<iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'></iframe>"; 

termino conseguir que se expanda en anchura para 100%, pero en términos de altura, es sólo 3 píxeles de alto y hay una barra de desplazamiento para desplazarse a la fondo.

Recorrí la web buscando una solución, pero nada de lo que probé funciona. Algunos mencionaron cambiar CSS así, pero fue en vano ...

EDITAR

Otro problema que enfrentamos es que la imagen se alejaste en Firefox. Necesito hacer clic en la imagen dentro del iframe para expandirlo a su tamaño completo. Sin embargo, aparece correctamente en Chrome e IE. ¿Hay una solución para esto?

Answer 1

añadir esto a CSS de su página principal:

body, html { 
    height:100% 
} 

Answer 2

Puede usar algo de JavaScript para detectar el tamaño de los contenidos de iframe y cambiar el tamaño del marco flotante.

Answer 3

El contenedor (el div circundante, si no tiene un contenedor debe crear uno) parece ser lo que limita la altura del iframe. Intenta hacer que la altura del contenedor sea del 100%.

Answer 4

Su problema es que está incrustando directamente un recurso de imagen.

Esto nunca va a funcionar como lo desea. La imagen siempre será de tamaño original.

Debe establecer la propiedad src del iframe en un archivo HTML independiente con un body propio, envolviendo la imagen. Luego puede darle el 100% de ancho y/o alto dentro del cuerpo usando CSS.

Answer 5

asegúrese de establecer un 100% de altura en todo a través del DOM ..ver http://api.fatherstorm.com/test/iframe.php

y http://api.fatherstorm.com/test/iframe2.php

de ejemplos, ya sea con una página incrustado (CNN) o una imagen

Answer 6

si tiene acceso a la imagen a nivel local y se pueden utilizar las funciones de PHP GD ...

$img_rsrc = imagecreatefromjpeg($path_to_image); 
// or imagecreatefrompng, imagecreatefromgif, etc, depending on the type of your image 
$height = imagesy($img_rsrc); 
$width = imagesx($img_rsrc); 
imagedestroy($img_rsrc); 

A continuación, establezca el tamaño de su iframe en píxeles según la altura y el ancho. Es posible que tenga que agregar un bit al alto y ancho para tener en cuenta los márgenes.

Answer 7

utilice el código de abajo para mostrar la imagen.

<iframe frameborder="0" scrolling="no" width="100%" height="100%" 
    src="../images/eightball.gif" name="imgbox" id="imgbox"> 
    <p>iframes are not supported by your browser.</p> 
</iframe><br /> 


<a href="../images/redball.gif" target="imgbox">Red Ball</a><br /> 
<a href="../images/floatingball.gif" target="imgbox">Floating Ball</a><br /> 
<a href="../images/eightball.gif" target="imgbox">Eight Ball</a>