Displaying image in Iframe

Question

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?

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

Answer 2

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