#StandWithUkraine
Andrey “Rarst” Savchenko —  — Code — bookmarklet, image, javascript

Fit image in browser window

While web is very image-heavy medium, browsers aren’t great image viewers. When viewing large images site might try to help with some kind of media viewer (at best), but more often you are starting at part of image that fits in window and scroll back and forth.

Some newer browsers (Firefox at least) can auto-scale images to fit, but this function is missing in Opera and I decided to make JavaScript bookmarklet for such function.

What is needed

Assuming we are looking at image opened by direct URL we only need two things:

  1. retrieve browser window dimensions;
  2. resize image accordingly.

Strangely there are many code examples around that show this separately, but no good and simple bookmarklets that combine them at all.

JavaScript

After amount of time I wasted on this, result is laughably tiny:

javascript:(function(){document.images[0].height=window.innerHeight;})();

This code grabs first (zero-ish in computer array speak) image on page and we have only that one when looking at direct URL. Then it assigns to image value of height, taken from browser window object.

Save this as bookmark or drag on browser toolbar (with Shift pressed in case of Opera).

Overall

Feels anticlimactic when something that annoys you for a long time turns out that easy to solve. But if there is one piece of productivity wisdom computers slowly pounded into me – it is getting rid of small annoyances that makes time to tackle more complex and interesting things.

Related Posts

12 Comments

  • henk #

    Sorry if this is perhaps a stupid question, but would there be a way to embed a function like this in the User CSS file? So instead of having to click the bookmarklet or button over and over again, all too-wide-images on all opened webpages would be resized to window width automatically? Thanks for suggestion!

  • Rarst #

    @henk Yep, I think user CSS would totally able to do this. On other hand I think user files management in Opera still sucks and they are not synced with Opera Link like bookmarks (and so bookmarklets). As result I am crappy with user files. :) Maybe I do need to learn up some day.

  • Ian Andrews #

    Ok sounds like a good idea, where do I go to download this app. can you please post a hyperlink....... thank you in advance.

  • Rarst #

    @Ian Andrews It's not an app, it is bookmarklet. Copy code form the post and save it as bookmark in your browser. Click bookmark to use function.

  • JHJ #

    Great, just switched to opera and can now cross this of my list of annoyances.

  • Rarst #

    @JHJ Welcome to blog and Opera as well. :) I hope you will like both. If I may ask what browser had you used previously and what made you switch?

  • dave #

    is there any way i can make this happen automatically like the scale to width function already in opera?

  • Rarst #

    @dave This might be possible with user js functionality... But as above I am not skilled with that. Sorry.

  • dave #

    if anyone cares i made a hack of this script and another old/ non working (on my ppc opera) at http://my.opera.com/community/forums/topic.dml?id=770512&t=1288853030&page=1#comment7583642 feel free to edit

  • Rarst #

    @dave Thanks for making and sharing it! Might be very handy. I am trying to learn up on JS, but going slowly.

  • Chad #

    Rarst, this is great, thanks! I actually set my home button to this, since I generally just use speed-dial anyways. Now I have a convenient image-resize button.

  • Rarst #

    @Chad You are welcome. :) By the way since Opera had since got extensions I now also use this one - MakeItSo. On other hand I had also tinkered some additional stuff with my bookmarklet to scan page for images. Maybe some day I will make it in Opera extension. I am still clumsy with JavaScript, but it is much more of a priority now.