fit image to screen properly in javascript

Question

I need to resize image from its natural size to fit the screen the same way as Chrome does with opened images in it, I wrote a rescale() function for this purpose (below).

It works mostly fine but for big landscape-oriented images (example where both width and height both exceed screen after resizing with my function http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg ) fullscreened image still exceeds screen by few lines at height (and rarely at width), so i wanted to ask if there is a better rescale javascript function out there or if here are any chromium source adepts who could look into chromiums source code to get the image resizing function from it so I could port it into javascript?

Here's the code:

function setautow() {
    img.style.width = 'auto';
    img.style.removeProperty("height");
    if (document.documentElement.clientHeight == 0) // Firefox again...
    {
        img.height = window.innerHeight;
    }
    else {
        img.height = document.documentElement.clientHeight;
    }
}

function setautoh() {
    img.style.height = 'auto';
    img.style.removeProperty("width");
    if (document.documentElement.clientWidth == 0) // FF
    {
        img.width = window.innerWidth;
    }
    else {
        img.width = document.documentElement.clientWidth;
    }
}

function shrink(a) {
    if (a) {
        if (img.width != document.documentElement.clientWidth) {
            setautoh();
        }
    }
    else {
        if (img.height != document.documentElement.clientHeight) {
            setautow();
        }
    }
}

var rescaled = false;

function rescale() {
    if (rescaled) {
        rescaled = false;
        img.height = img.naturalHeight;
        img.width = img.naturalWidth;
        img.style.removeProperty("height");
        img.style.removeProperty("width");
    }
    else {
        rescaled = true;
        if (img.naturalWidth > img.naturalHeight) {
            setautoh();
            setTimeout(function () {
                shrink(true);
            }, 0);
        }
        else {
            setautow();
            setTimeout(function () {
                shrink(false);
            }, 0);
        }
    }
}

Edited question, was doubting how to formulate that part. P.S. backticks don't work with such big code so I'll need lots of em or wouid have to 4space every line... So I just posted pastebin, it won't expire there don't worry, it's set to Never expire. — Owyn, Jul 20 '13 at 10:33

Mark · Answer 1 · 2013-07-20T13:20:33.020

5

The following seems to do the job nicely, as long as image width/height is not specified in CSS.

#Javascript
window.onresize = window.onload = function()
{
    resize();
}

function resize()
{
    var img    = document.getElementsByTagName('img')[0];
        winDim = getWinDim();


    img.style.height = winDim.y + "px";

    if (img.offsetWidth > winDim.x)
    {
        img.style.height = null;
        img.style.width = winDim.x + "px";
    }
}

function getWinDim()
{
    var body = document.documentElement || document.body;

    return {
        x: window.innerWidth  || body.clientWidth,
        y: window.innerHeight || body.clientHeight
    }
}

#CSS
body{
    margin:0;
    padding:0;
    text-align:center;
    background:rgb(51, 51, 51);
}

#HTML
<img src="http://placehold.it/4000x3000" />

edited Jul 20 '13 at 13:20

answered Jul 20 '13 at 11:02

Mark

1,093
1
9
22

It was answering my question I believe, it works perfectly for image I posted, but has some troubles if I resize browser window to lower resolutioin - image is still bigger than browser window – Owyn Jul 20 '13 at 11:31
found out that is because it only changes img.style.height but not width, so it only works when I resize browser window vertically but no horizontally, have to figure out how to make it work horizontally – Owyn Jul 20 '13 at 11:47
@T.J.Crowder I revisited some of my others answers earlier and deleted some that seemed to have served little to no purpose. I then too hastily wrote an answer to this question, and could not delete the answer because I have already deleted 5 answers today. The problem with this answer is that the image should be able to be resized to below or above 100% when zooming in on the page, if it is supposed to work like image viewing in Chrome. – Mark Jul 20 '13 at 13:15
@Mark: Ah! Very interesting (about the deletion limit). I had no idea. Good on you for removing stuff that served little or no purpose. (And sorting this out for the OP.) – T.J. Crowder Jul 20 '13 at 13:18
@Owyn I have edited `resize()` to behave the same as Chrome image viewing when image width is greater than the window width. Is it better now? – Mark Jul 20 '13 at 13:22
To see if it work in all cases with onresize event we need just to resize browser window in all possible ways and see that no scrollbar is present and image proportions are correct, I spent some time and made a perfect resize function for Chrome & Firefox I believe, hope it helps someone, I'll post it as an answer below – Owyn Jul 20 '13 at 14:07
Wow this actually works, unlike all the JQuery plugins, CSS3 complexities etc. – Sridhar Sarnobat Feb 12 '18 at 01:42

Owyn · Accepted Answer · 2013-07-20T21:01:11.343

Finally made what I was looking for, works great for FireFox + Chrome

edit: well, perfect for images larger than screen, gonna work on it so it could work on smaller images

function fit_to_screen()
{
    img.removeAttribute("style");
    var winX = window.innerWidth + "px";
    var winY = window.innerHeight + "px";
    var vbar = false;
    if (document.body.scrollHeight > document.body.clientHeight) // vertical scrollbar
    {
            img.style.height = winY;
            vbar = true;
    }
    if (document.body.scrollWidth > document.body.clientWidth) // horizontal scrollbar
    {
            if (vbar) // both scrollbars
            {
                    if ((document.body.scrollHeight - document.body.clientHeight) > (document.body.scrollWidth - document.body.clientWidth)) // let's see which one is bigger
                    {
                            img.removeAttribute("style");
                            img.style.height = winY;
                    }
                    else
                    {
                            img.removeAttribute("style");
                            img.style.width = winX;
                    }
            }
            else
            {
                    img.removeAttribute("style");
                    img.style.width = winX;
            }
    }
}

// bonus, switch between original size and fullscreen
var rescaled = false;

function rescale()
{
    if (rescaled)
    {
            rescaled = false;
            img.removeAttribute("style");
    }
    else
    {
            rescaled = true;
            fit_to_screen();
    }
}

fit image to screen properly in javascript

2 Answers2