Поместите изображение на экран должным образом в JavaScript

Мне нужно изменить размер изображения от его естественного размера, чтобы он уместился на экране так же, как Chrome с открытыми изображениями в нем, я написал rescale() функция для этой цели (ниже).

Это работает в основном нормально, но для больших пейзажно-ориентированных изображений (например, когда ширина и высота превышают размер экрана после изменения размера с помощью моей функции http://imageontime.com/upload/big/2013/07/20/51ea60b522bba.jpg) полноэкранного изображения по-прежнему превышает экран на несколько строк по высоте (и редко по ширине), поэтому я хотел спросить, есть ли там лучшая функция jasascript для изменения масштаба или есть какие-нибудь адепты исходного кода хрома, которые могли бы изучить исходный код хрома, чтобы получить изменение размера изображения функция от него, чтобы я мог перенести его в JavaScript?

Вот код:

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);
        }
    }
}
Источник

2 ответа

Решение

Наконец то сделал то что искал, отлично работает для FireFox + Chrome

редактировать: ну, идеально подходит для изображений больше экрана, будет работать на нем, чтобы он мог работать на меньших изображениях

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();
    }
}
Источник

Следующее, кажется, делает работу хорошо, если ширина / высота изображения не указана в 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" />
Источник
Другие вопросы по тегам