title: Displaying image in Iframe
body: <p>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.</p>
  
  <p>What I want to do is the following. </p>
  
  <ul>
  <li>Have an iframe on my webpage.</li>
  <li>Call an image within the iframe.</li>
  <li>Make the image expand to full-size and as a reaction, the iframe allows me to scroll.</li>
  <li>Not have any scroll bars on my webpage</li>
  </ul>
  
  <p>Currently, here's the code I have:</p>
  
  <pre><code>echo"&lt;iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'&gt;&lt;/iframe&gt;";
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>echo"&lt;iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'&gt;&lt;/iframe&gt;";
  </code></pre>
  
  <p>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.</p>
  
  <p>I scoured the web looking for a fix, but nothing I tried works. Some mentioned changing CSS as well, but to no avail ...</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Another problem I face is that the image is <em>zoomed out</em> 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?</p>