jquery - 使用滚动视差 jQuery 插件时保持图像纵横比不变

Question

我正在使用 Scrolling Parallax jQuery plugin在 this site 上滚动“背景”图像(实际上不是 css 背景图像) .

是否有可能保持图像纵横比，即不压缩图像，并且仍然可以在所有现代浏览器中工作？

我尝试设置 bgHeight : 'auto' 将图像 css 设置为 height:auto，但这会停止在 Chrome 和 Safari 中工作的滚动效果。

我也尝试设置 bgWidth : 'auto' 但是图像比浏览器窗口窄。

也向其他插件或实现此效果的方式开放，即让背景图像以与页面内容不同的速率滚动，并显示整个图像，但不滚动过去...

在此先感谢您的帮助!

Answer 1

因为宽度自动设置为视口(viewport)的 100%，除非您更改它，否则会发生拉伸(stretch)。

使用这个:

$.scrollingParallax('img/clouds.png', {
    bgHeight : '250%',
    staticSpeed : .25,
    staticScrollLimit : false,
    bgWidth: 'auto'
});

上面的内容可以在这里看到:jsFiddle

---

由于未拉伸(stretch)的背景图像总是向左浮动，我利用了一些 jQuery 优点，使图像始终位于视口(viewport)中心，即使在 Window Resize Event 期间也是如此。也就是说，图像现在可以放大到最大图像大小或缩小，同时在所有浏览器中保持纵横比。

$(function() {

    // Specify your background image here.
    var bgMain = 'http://indigobrazilianportuguese.com/2012/wp-content/uploads/Home_bg1600.jpg';

    $.scrollingParallax(bgMain, {
        bgHeight : '200%',
        staticSpeed : 0.25,
        staticScrollLimit : false,
        // Important to set to 'auto' so Aspect Ratio for width is preserved because height defined above is fixed.
        bgWidth: 'auto'
    });

    // These two lines is for page load.
    // The variable will calculate CSS 'left' for the background image to center it in the viewport.
    // First, horizontal viewport size is checked via $(window).width()
    // Then, image width is determined by searching for image's unique filepath/filename.
    // Once the different is known, this value is then divided by 2 so that equal space is seen on left and right side of image which becomes the variable value.
    var bgMainHcenter = ( $(window).width() - $('body img[src="' + bgMain + '"]').width() ) /2 ;
    $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px');

    // Just like above, it's repeated during Window Resize Event.
    $(window).resize(function() {
        bgMainHcenter = ( $(window).width() - $('body img[src="' + bgMain + '"]').width() ) /2 ;
        $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px');
    });

});

在此处查看实际效果: jsFiddle