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

我使用Scrolling Parallax jQuery plugin滚动this site上的“背景”图像（实际上不是css背景图像）。在使用滚动视差jQuery插件时保持图像纵横比不变

是否有可能保持图像宽高比，即不挤压图像，并仍然在所有现代浏览器中都能正常工作？

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

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

也开到其他插件或实现这样的效果，即具有背景图像滚动速度不同的网页内容，并显示整个图像，而不是滚过它的方式...

在此先感谢您的帮助！

来源

2012-06-21 Caroline Elisa

如果你把身体的背景和使用的背景大小的图像：盖; http://css-tricks.com/perfect-full-page-background-image/ – SVS

你能设置宽度或高度的百分比吗？ – Huangism

对于写得好的问题+1。 – arttronics

因为宽度自动设置为视口的100％，所以除非您更改了宽度，否则将发生拉伸。

使用此：

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

以上可以在行动在这里看到：jsFiddle

由于非拉伸背景图像始终浮动离开，我掀起了一些jQuery的善良使图像始终居中在视口中，即使在窗口大小调整事件期间也是如此。也就是说，图像现在将扩大到最大图像大小或缩小，同时保持所有浏览器的纵横比。

$(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-21 21:42:11 arttronics

感谢arttronics，但正如我在我的问题中提到的，当我将'bgWidth'设置为'auto'时，图像显示比浏览器窗口更窄（即使'bgHeight'设置为'200％'） –

Opps ...我匆匆只是提供一个片段的答案，而没有阅读完整的问题，这是完整的答案。也就是说，我现在提供了完整的示例标记和跨浏览器友好的jsFiddle。如果您的网站仍然存在问题，请按上图所示包含'bgWidth'，我会查看最新情况。 – arttronics

提醒：**总是**在加载页面后，按jsFiddle中的**运行按钮**，以确保代码正确启动。谢谢。 – arttronics

好的，所以根据他们的主页，你可以设置宽度和高度的百分比，所以我会先尝试一下，看看它是怎么回事。

来源

2012-06-21 20:41:54 Huangism

感谢Haungism。我首先尝试了'％'，但是当浏览器窗口调整大小时，图像纵横比就会丢失。 –

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

回答

相关问题