Displaying image in Iframe

问题

I want to display an image within an iframe on my webpage. However, the problem is that I can't get it to expand to 100% of its size.

What I want to do is the following.

Have an iframe on my webpage.
Call an image within the iframe.
Make the image expand to full-size and as a reaction, the iframe allows me to scroll.
Not have any scroll bars on my webpage

Currently, here's the code I have:

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

What this does is that, it makes the iframe come on top of my webpage and still doesn't expand to 100%. If i remove the position:absolute instead:

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

I end up getting it to expand in width to 100%, but in terms of height, it is just 3 pixels high and there is a scrollbar to scroll to the bottom.

I scoured the web looking for a fix, but nothing I tried works. Some mentioned changing CSS as well, but to no avail ...

EDIT

Another problem I face is that the image is zoomed out in Firefox. I need to click on the image within the iframe to expand it to its full size. It shows up correctly in Chrome and IE though. Is there a fix for this?

回答1:

use below code to to display image.

<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>

回答2:

You can use some JavaScript to detect the size of the iframe contents and resize the iframe.

回答3:

Add this to your main page's CSS:

body, html {
   height:100%   
}

回答4:

The container (the enclosing div, if you don't have a container you should create one,) seems to be what is limiting the height of the iframe. Try making the height of the container 100%.

回答5:

Your problem is that you are directly embedding an image resource.

This is never going to work the way you want. The image is always going to be original size.

You need to set the src property of the iframe to a separate HTML file with a body of its own, wrapping around the image. Then you can give it 100% width and/or height inside the body using CSS.

回答6:

IF you have access to the image locally AND you can use the php GD functions...

$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);

Then set the size of your iframe in pixels based on the height and width. You may have to add a bit to the height and width to account for margins.

回答7:

make sure you are setting 100% heights on everything though the DOM.. see http://api.fatherstorm.com/test/iframe.php

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

for examples with either a embedded page (CNN) or an image

来源：https://stackoverflow.com/questions/4149469/displaying-image-in-iframe

标签

php

html

iframe