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 = 'width: 300px; height: auto;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -' + height / 2 + 'px';
         else
             img.style.cssText = 'width: auto; height: 300px;position: absolute;left: 50%;margin-left: -' + width / 2 + 'px;top: 50%;margin-top: -150px';

         imgDIv.style.cssText = 'width:300px;height: 300px;position:relative;float: left; border: 1px solid #eee;padding: 8px;margin-top: 0px;';
         box.style.cssText    = 'overflow: hidden;width: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 {
         //...
     }
 }

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

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