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?