使用jQuery模拟CSS3背景大小

时间:2011-09-23 12:28:39

标签: jquery css3 css

我有一个圆形图像轮播,它几乎涵盖了整个浏览器视口。每个轮播项目都是需要以CSS3的background-size: cover样式呈现的风景图像,以及background-size: contain的肖像图像。当然,对于支持它的浏览器,这就是我使用的,它工作正常。

我正在尝试为不支持这些CSS3属性的浏览器实现基于jQuery的回退。

if (Modernizr.backgroundsize) {
    // all good, do nothing (except some housekeeping)
} 
else {
    // emulate background-size:cover
    $('.slide img').each(function() {

        iw = $(this).width();
        ih = $(this).height();
        iratio = iw/ih;

        if (iw >= ih) { // landscape
            var newHeight = w / iratio;
            if (ih<h) { 
                $(this).css({height:newHeight, width:w}); // fix this
                // use negative margin-left to show center?
            } else {
                $(this).css({height:newHeight, width:w});
                // set negative margin-top to show the center of the image
            }
        } else { // portrait
            var newWidth = h * iratio;
            $(this).css({height:h, width:newWidth});
        }

    });

0 个答案:

没有答案