1

我正在使用Scrolling Parallax jQuery 插件来滚动此站点上的“背景”图像（实际上不是 css 背景图像）。

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

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

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

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

提前感谢您的帮助！

4

2 回答 2

1

因为宽度自动设置为视口的 100%，所以除非你改变它，否则会发生拉伸。

用这个：

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

以上可以在这里看到：jsFiddle

由于未拉伸的背景图像始终向左浮动，因此我使用了一些 jQuery 优点，因此图像始终位于视口中心，即使在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

于 2012-06-21T21:42:11.993 回答
0

好的，所以根据他们的主页，您可以为宽度和高度设置 %，所以我会先尝试一下，看看效果如何。

于 2012-06-21T20:41:54.683 回答