div中图片水平和垂直居中并自适应宽高

2019-04-15 14:30发布

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> div中图片水平和垂直居中并自适应宽高
 
http://www.baidu.com/img/baidu.gif" />
 
http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
 
http://pics.taobaocdn.com/bao/album/mall/b2c/qingrou611_0002.jpg" />
 
http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
第二种方法:可以自定义宽高 /* imgId:     img标签id maxWidth:  图片的最大宽度 maxHeight: 图片的最大高度 调用: */ function ResetPicSize(imgId,maxWidth,maxHeight) {     //如果图片的宽与要求的高的乘积大于图片的高与要求的宽的乘积,那么调整图片的宽以适应要求的宽,图片的高自适应;否则调整图片的高以适应要求的高,图片的宽自适应     if(imgId.width * maxHeight > imgId.height * maxWidth)     {         imgId.width = (imgId.width > maxWidth) ? maxWidth : imgId.width;     }     else     {         imgId.height = (imgId.height > maxHeight) ? maxHeight : imgId.height;     }     //调整图片上间距,让图片垂直居中于div     imgId.style.top = (maxHeight - imgId.height) / 2; }