【Javascript】原生js图片自适应尺寸居中函数处理

/*
 |  autoSerializePicture.js 自适应格式化图片
 |  auther : baichaohua/2017-09-21
 +------------------------------------------------ */

/*  JSON 示例
[
    { 
        "imgSrc":"logo.png",   //路径
        "imgText":"示例图片1", //文本
        "width":"185",         //原始宽
        "height":"185"         //原始高
    },
    {
        "imgSrc":"1.jpg",
        "imgText":"示例图片2",
        "width":"1024",
        "height":"640"
    }
]
*/
// 用法示例：addPictureAutoSize(json数据, 父级：document.getElementById('xxx')元素-默认body, );

var autoSerializePicture = function (json, parent, callback) {

    var obj      = JSON.parse(json);
    var totalDiv = document.createElement('div');
    totalDiv.id  = 'autoSerializePictureBox';

    for (var i = 0; i < obj.length; i++) {
        var box      = document.createElement('div');
        var imgDIv   = document.createElement('imgDIv');
        var p        = document.createElement('p');
        var pv       = document.createElement('p');
        var textNode = document.createTextNode(obj[i].imgText);

        var width  = obj[i].width * 300 / obj[i].height;
        var height = obj[i].height * 300 / obj[i].width;

        var img  = new Image();
        img.src  = obj[i].imgSrc;

        if (obj[i].width / obj[i].height >= 1) 
            img.style.cssText = ' 300px; height: auto;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -' + height / 2 + 'px';
        else
            img.style.cssText = ' auto; height: 300px;position: absolute;left: 50%;margin-left: -' + width / 2 + 'px;top: 50%;margin-top: -150px';

        imgDIv.style.cssText = '300px;height: 300px;position:relative;float: left; border: 1px solid #eee;padding: 8px;margin-top: 0px;';
        box.style.cssText    = 'overflow: hidden;300px;height: 350px;position:relative;float: left;padding: 8px;margin-top: 0px;';
        p.style.cssText      = 'text-align: center;margin-top: 324px;';
        pv.style.cssText     = 'height: 40px;';

        imgDIv.appendChild(img);
        p.appendChild(textNode);
        box.appendChild(imgDIv);
        box.appendChild(p);
        box.appendChild(pv);
        totalDiv.appendChild(box);
    }
    if(parent)
        parent.appendChild(totalDiv);
    else
        document.getElementsByTagName('body')[0].appendChild(totalDiv);

    if (callback) callback(json);

    return {
        //...
    }
}

今天同事遇到一个问题，就是有很多图片，需要生成列表，但是图片大小需要自适应且居中，就写了一个方法。

直接上代码了，自适应格式化图片，图片效果：