前军教程网

#前端##Web前端技术#

使用javascript判断图片的大小，进行横竖图，自动上下(左右)铺满，居中。

宽图：左右铺满，上下居中。

长图：上下铺满，左右居中。

var imgObj = new Image();
//屏幕宽高
var windowW = $(window).width();
var windowH = $(window).height();

imgObj.onload = function(){
    //原图片宽高
    var imgW = this.width;
    var imgH = this.height;
    /*
     * 图片在该屏幕显示的展示宽高
     */
    //展示宽 = 屏幕高 * 原图片宽 / 原图片高
    var realW = windowH * imgW / imgH;
    //展示高 = 屏幕宽 * 原图片高 / 原图片宽
    var realH = windowW * imgH / imgW;

    /*
     * 判断图片是横图还是竖图
         * h/w > 1.2 竖图
     */
     if(imgH / imgW > 1.2){//竖图
         $('#index_gif').css({
             'height':windowH +'px',
             'margin-left':parseInt((windowW-realW)/2) + 'px'
         });
     }else{
         $('#index_gif').css({
             'width':windowW +'px',
             'margin-top':parseInt((windowH-realH-40)/2) + 'px'
         });
     }
}
//设置图片连接
imgObj.src="图片链接";