Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Automatic image resize - small to window size

  • 6 replies
  • 3 have this problem
  • 3680 views
  • Last reply by cor-el

more options

When viewing a standalone image too large to fit in the window, Firefox automatically resizes it.

That's all well and good, but I deal with smaller images most of the time. Having to manually zoom the image every time to get it around window size is very tedious, and I'd like to avoid the rigmarole.

Chosen solution

The Image Autosizer extension for Opera has the functionality I'm looking for, but I couldn't find an equivalent for Firefox.

I wrote a user script (to be used with Scriptish).

  • It automatically zooms in small images.
  • Left-clicking the image returns it back to its original size.
  • Left-clicking again will zoom in again (useful for example if you maximize the window to get a better view after the image has already been zoomed in automatically).
  • By default, this script doesn't run on URLs without an image file extension (like this comic strip). Such URLs can be added manually in the Scriptish preferences for the script.

// ==UserScript==
// @id             dc989f0a-f9e6-4507-ba5f-a0730a614553@http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @name           Auto zoom lone images
// @version        2.5
// @namespace      http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @author         Gingerbread Man
// @description    Automatically zoom small standalone images
// @include        http://*.jpg
// @include        https://*.jpg
// @include        http://*.gif
// @include        https://*.gif
// @include        http://*.png
// @include        https://*.png
// @run-at         window-load
// ==/UserScript==

var img = document.images[0];
var iw = img.width;
var ih = img.height;
var ir = iw / ih;

function togglezoom() {
	if (img.width>iw||img.height>ih) {
		img.width = iw;
		img.height = ih;
		img.setAttribute("style","cursor:-moz-zoom-in");
	}
	else zoomin();
}

function zoomin() {
	var ww = window.innerWidth;
	var wh = window.innerHeight;

	if (iw<ww&&ih<wh) {
		img.addEventListener("click", togglezoom, false);
		var zohw = wh * ir;

		if (zohw<=ww) {
			img.height = wh;
			img.width = img.height * ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

		else {
			img.width = ww;
			img.height = img.width / ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

	}

}

zoomin();

//.user.js

I guess since I haven't received any suggestions, I'll mark this as the solution.

Read this answer in context 👍 0

All Replies (6)

more options

So you want to automatically zoom and fit to window the small images ? i.e.: small like this https://support.mozilla.org/media/uploads/avatars/2011-03-23-00-15-15-cc9514.jpg ??

more options

Jan. wrote:

So you want to automatically zoom and fit to window the small images ? 

Yes.

Jan. wrote:

i.e.: small like this

Anything smaller than window size. Resizing avatars or emoticons isn't particularly useful, but when your resolution is high enough, there's a myriad of other images that are simply too small to make out.

more options

Chosen Solution

The Image Autosizer extension for Opera has the functionality I'm looking for, but I couldn't find an equivalent for Firefox.

I wrote a user script (to be used with Scriptish).

  • It automatically zooms in small images.
  • Left-clicking the image returns it back to its original size.
  • Left-clicking again will zoom in again (useful for example if you maximize the window to get a better view after the image has already been zoomed in automatically).
  • By default, this script doesn't run on URLs without an image file extension (like this comic strip). Such URLs can be added manually in the Scriptish preferences for the script.

// ==UserScript==
// @id             dc989f0a-f9e6-4507-ba5f-a0730a614553@http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @name           Auto zoom lone images
// @version        2.5
// @namespace      http://forums.mozillazine.org/memberlist.php?mode=viewprofile&u=261941
// @author         Gingerbread Man
// @description    Automatically zoom small standalone images
// @include        http://*.jpg
// @include        https://*.jpg
// @include        http://*.gif
// @include        https://*.gif
// @include        http://*.png
// @include        https://*.png
// @run-at         window-load
// ==/UserScript==

var img = document.images[0];
var iw = img.width;
var ih = img.height;
var ir = iw / ih;

function togglezoom() {
	if (img.width>iw||img.height>ih) {
		img.width = iw;
		img.height = ih;
		img.setAttribute("style","cursor:-moz-zoom-in");
	}
	else zoomin();
}

function zoomin() {
	var ww = window.innerWidth;
	var wh = window.innerHeight;

	if (iw<ww&&ih<wh) {
		img.addEventListener("click", togglezoom, false);
		var zohw = wh * ir;

		if (zohw<=ww) {
			img.height = wh;
			img.width = img.height * ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

		else {
			img.width = ww;
			img.height = img.width / ir;
			img.setAttribute("style","cursor:-moz-zoom-out");
		}

	}

}

zoomin();

//.user.js

I guess since I haven't received any suggestions, I'll mark this as the solution.

Modified by Gingerbread Man

more options

Thanks for posting the script Gingerbread_Man

Edit: noticed that you've fixed the script, so this no longer applies

I noticed that you forgot to check for square images (iw==ih)

Wouldn't this be better (do you need iw==ww and ih==wh)?

function zoomin() {

var ww = window.innerWidth;
var wh = window.innerHeight;

if (iw>=ih&&iw<=ww) {
	img.width = ww;
	img.height = img.width / ir;
	img.setAttribute("style","cursor:-moz-zoom-out");
}

else if (iw<=ih&&ih<=wh) {
	img.height = wh;
	img.width = img.height * ir;
	img.setAttribute("style","cursor:-moz-zoom-out");
}

}

Here is a compressed version that can be used as a bookmarklet if you want to use it in a profile that doesn't have the extension or for local files because Scriptish doesn't seem to support the file:/// protocol.


javascript:(function(){var img=document.images[0],iw=img.width,ih=img.height,ir=iw/ih;function zoomin(){var ww=window.innerWidth,wh=window.innerHeight;if(iw<ww&&ih<wh){var zohw=wh*ir;if(zohw<=ww){img.height=wh;img.width=img.height*ir;img.setAttribute("style","cursor:-moz-zoom-out");}else{img.width=ww;img.height=img.width/ir;img.setAttribute("style","cursor:-moz-zoom-out");}}}zoomin();function togglezoom(){if(img.width>iw||img.height>ih){img.width=iw;img.height=ih;img.setAttribute("style","cursor:-moz-zoom-in");}else zoomin();}img.addEventListener("click",togglezoom,false);})()

Scriptish supports RegExp, so you can use something like this:

// @include        /^(https?:[/]{2}|file:[/]{3}).+[.](jpg|gif|png|bmp)/i

Modified by cor-el

more options

Thank you for the reply.

cor-el wrote:

Scriptish supports RegExp, so you can use something like this: 

I didn't think there was anything to be gained from RegExp in this case. I think I still prefer separate includes for the sake of readability.

cor-el wrote:

Scriptish doesn't seem to support the file:/// protocol. 

Not by default, but extensions.scriptish.enabledSchemes.file can be toggled to true in about:config.


I updated the script again because it was breaking the zoom function for images larger than the window (which it's supposed to leave alone). It should be okay now. I've tested it with

I'd appreciate it if you could give it another look and point out if there are any problems. Thanks again.

more options

Yes. This looks a lot better. I had noticed other issues with the previous script that caused scroll bars to appear.

I noticed that LouCypher posted a link ([*]) to a script that is meant to run under the same conditions that test if document.contentType starts with 'image/" to avoid testing for a scheme and file extension.