Resize IFrame Image

Question

In any modern browser, when you visit the URL of an image (for example, http://i.imgur.com/xrM9q.jpg ), it automatically resizes this image and gives you the option to “zoom in” with a small magnifying glass. This does not always apply to iframes:

<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe> 

If you associate an iframe with an image, Firefox will give this nice behavior: it starts behaving like max-width: 100%; max-height: 100% max-width: 100%; max-height: 100% , then you can click on it to make it large.

However, in Chrome, the image is simply full-sized. Try opening this example in Chrome and Firefox.

How to force Chrome to process images "smartly"? That is, if the default behavior shows a magnifying glass cursor and provides automatic resizing?

(To clarify: I want this to work in the Chrome extension. The only solution I have come up with so far is to place the contents of the script on all pages and manually change the style on the images on the page. The solution sucks, so I hope for a method, which is less hacked and does not affect every page the user visits)

Answer 1

Try to make the iframe a link to another html file, and in this html file place the img tag with a width and height limit. I think this will work on most browsers this way.