朋友想要实现不管什么电脑，他的轮播图始终是完美占满首屏，不多不少。想到的比较简单的一个办法就是通过css的clip属性进行图片裁剪了
var $win_width = $(window).width();
var $win_height = $(window).height();
// 当窗口宽度大于1024 ，进行图片裁剪
if($win_width>1024){
//每次载入完成 缩略图进行css裁切(其实只是隐藏了部分)
$("#cp-banner-1 img").one('load', function() {
var $img_width = $(this).width();
var $img_height = $(this).height();
//如果图片长高比小于显示窗口，进行 上下裁剪
if($win_width/$win_height>=$img_width/$img_height){
//console.log(111)
var $clip_height = ($win_height - $win_width/($img_width/$img_height))/2;
var $clip_height_2 = $win_height +($win_height - $win_width/($img_width/$img_height))/2;
$(this).css("clip","rect("+$clip_height+"px,auto,"+$clip_height_2+"px, auto)");
$(this).css("margin-top","-"+$clip_height+"px");
$(this).parent().css("height",$win_height+"px");//thumb
}else{
//console.log(222)
var $clip_width = ($img_width/($img_height/$win_height) - $win_width)/2;//裁剪的top
var $clip_width_2 = $win_width +($img_width/($img_height/$win_height) - $win_width)/2;
$(this).css("height",$win_height+"px");
$(this).css("width",$img_width/($img_height/$win_height)+"px");
$(this).css("clip","rect(auto,"+$clip_width+"px,auto,"+$clip_width_2+"px)");
$(this).css("margin-left","-"+$clip_width+"px");
$(this).parent().css("height",$win_height+"px");//thumb
}
}).each(function() {
if(this.complete) $(this).load();
//如果已经加载过，我们对图片执行load方法
});
}