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

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.