CODEWITHSUNDEEP
phphtmliframe
12345
12345

Reputation: 299

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.

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?

Upvotes: 11

Views: 106121

Answers (6)

Ram
Ram

Reputation: 121

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>

Upvotes: 7

Mike C
Mike C

Reputation: 1778

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449415

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.

Upvotes: 0

erkmene
erkmene

Reputation: 930

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

Upvotes: 0

Dan Grossman
Dan Grossman

Reputation: 52372

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

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Add this to your main page's CSS:

body, html {
   height:100%   
}

Upvotes: 0

Related Questions