Styling image inside iframe

Question

I have an image inside an iframe by setting the src attribute of the iframe:

<iframe src="path/to/my/image.jpg" class="myclass"></iframe>

The iframe has a fixed height and width. I want that image's width to fill the iframe, but its height would stay proportional to the width so the user would be able to scroll down the iframe to see the rest of the image.
How do I do this?
EDIT: JSFiddle link http://jsfiddle.net/2LExA/

Answer 1

you use an iframe primarily to display a separate html page, which would contain an image. You would therefore use css for that page to style the image. You can use css to style the width of your iframe, but not its content.

Your other alternative is to place the image in a div, and style the image relative to that div.

html

<div><img src="yourimg" /></div>

css

div{width:600px;height:300px;}
img{width:50%;}

Answer 2

I set the src of the iframe to a page called show_image.php and passed the image url as query string:

<iframe src="show_image.php?src=path/to/image.jpg" class="foobar"></iframe>

Then in the show_image.php, I dropped an img with its src set to the query string and width to 100%:

<img src="<?php echo $_GET['src']; ?>" style="width:100%" />

Done! Thanks to lukeocom's hint for mentioning that I should put the image in a separate page.