使用js控制banner宽高

var tick=setTimeout(function banner_height(){
                               if (window.innerWidth) {
                                winWidth = window.innerWidth;
                            } else if ((document.body) && (document.body.clientWidth))
                            {
                                winWidth = document.body.clientWidth;
                            }
                            if (document.documentElement && document.documentElement.clientWidth)
                            {
                                winWidth = document.documentElement.clientWidth;
                            }
                        winWidth<1200?winWidth=1200:winWidth;
                            $(".banner").css("height",winWidth/3.2);},500);
                        $(window).resize(function banner_height(){
                               if (window.innerWidth) {
                                winWidth = window.innerWidth;
                            } else if ((document.body) && (document.body.clientWidth))
                            {
                                winWidth = document.body.clientWidth;
                            }
                            if (document.documentElement && document.documentElement.clientWidth)
                            {
                                winWidth = document.documentElement.clientWidth;
                            }
                        winWidth<1200?winWidth=1200:winWidth;

                            $(".banner").css("height",winWidth/3.2);});

》》》》》》》》》》》》》》》》》》》》》》》》

补充:

设置banner时，考虑到图片要在不同分辨率下保持横向充满屏幕，所以轮播部分外部宽度均为100%  高度由子元素撑开，子元素最内层为图片，为保证图片恰好充满轮播区域，宽高均设置为100%，此时轮播区域无任何可撑开高度，且子元素加入定位之后父级高度会塌陷为0；如上js为强行锁定图片比例

新方法 利用padding百分比为基于本身宽度属性设置

<div><img/></div>

假设图片为1920*480

如上代码    设置 div样式{width:100%;position:relative;padding-bottom:25%;}

img{position:absolute;top:0;left:0;width:100%;height:100%;}

即可实现