JQuery: сохранить соотношение сторон при изменении размера фонового изображения - PullRequest
Новая
       31

JQuery: сохранить соотношение сторон при изменении размера фонового изображения

0 голосов
/ 27 марта 2012

У меня есть сайт, на котором требуется фоновое изображение на главной странице.

Следующий код отлично работает на сайте, но я не могу понять, как сохранить пропорции изображений. 

function resize(itemToResize){
var newHeight = $(document).height() -120,
    newWidth = $(window).width();
$(itemToResize).css({
    "width" : newWidth,
    "height" : newHeight
    });
};

Я думаю, мне нужно что-то вроде оператора if, например, если ширина совпадает с шириной окна, а высота слишком мала, совпадает с высотой и корректирует ширину ... Я просто не могу определить правильный синтаксис !

Обновление: используя метод, описанный здесь Какой алгоритм для вычисления соотношения сторон? Мне нужен вывод как: 4: 3, 16: 9 Я могу получить доступ к соотношению сторон изображения. Однако теперь у меня есть соотношение, и я не знаю, что с ним делать!

Обновленный код: - 

function gcd (a, b) {
    return (b == 0) ? a : gcd (b, a%b);
    }

function resize(itemToResize){
var newHeight = $(document).height() -120,
    newWidth = $(window).width();

var w = $(itemToResize).width(),
    h = $(itemToResize).height(),
    r = gcd (w, h);

$(itemToResize).css({
    "width" : newWidth,
    "height" : newHeight
    });
};

ОБНОВЛЕНИЕ 2:

После того, как я немного подождал, у меня есть этот код: 

function resize(itemToResize){  
var AspectRatio = $(itemToResize).width()/$(itemToResize).height();
var WindowHeight = $(document).height() -205;
var WindowWidth = $(window).width();
var AspectRatio = WindowWidth/WindowHeight;
if (AspectRatio >= AspectRatio) {
     $(itemToResize).css({
        "width" : WindowWidth,
        "height" : WindowWidth/AspectRatio
        }); 
     $('body').css({
        "height" : WindowWidth/AspectRatio
     });
} else {
    $(itemToResize).css({
        "width" : WindowHeight*AspectRatio,
        "height" : WindowHeight
        });
    $('body').css({
        "height" : WindowHeight
     });
    };

};

Который поддерживает соотношение сторон, но не совсем правильно растягивается. Так что исправить, но только частично.

Ответы [ 2 ]

0 голосов
/ 27 марта 2012 
$(window).load(function() {
 var $win = $(this);
 var $img = $('#background').css({'position':'fixed','top':0,'left':0});
    function resize() {
        if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
          $img.css({'height':'100%','width':'auto'});
        } else {
          $img.css({'width':'100%','height':'auto'});
        }
    }
    $win.resize(function() { resize(); }).trigger('resize');
});
0 голосов
/ 27 марта 2012

Есть несколько плагинов JQuery, которые уже делают то, что вам нужно;

  1. JQuery supersized - http://buildinternet.com/project/supersized/
    Supersized позволяет слайд-шоу и несколько фонов, но также имеет одинфон, меньший кодовый блок, доступный для загрузки.

  2. JQuery Backstretch - http://srobbin.com/jquery-plugins/backstretch/

Надеюсь, это поможет.

...