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

来源：互联网发布：get请求数据体编辑：程序博客网时间：2024/04/29 13:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div中图片水平和垂直居中并自适应宽高</title> <script language="javascript"> function ReImgSize(pic){ for (i=0;i<pic.length;i++) { if(pic[i].width*100 > pic[i].height*200) { //如果图片的宽与要求的高的乘积大于图片的高与要求的宽的乘积，那么调整图片的宽以适应要求的宽，图片的高自适应；否则调整图片的高以适应要求的高，图片的宽自适应 pic[i].width=(pic[i].width>200)?"196":pic[i].width-4;//后面减4是因为我加了边框总共占4像素 //调整图片上间距，让图片垂直居中于div pic[i].style.top = (100-pic[i].height)/2; } else { pic[i].height=(pic[i].height>100)?"96":pic[i].height; pic[i].style.top = (100-pic[i].height)/2; } } } </script>

</head>

第二种方法：可以自定义宽高

/*imgId: img标签idmaxWidth: 图片的最大宽度maxHeight: 图片的最大高度调用:<img id=goodslistimg onload='ResetPicSize(this,160,160)' style=position:relative; src="pic.jpg" />*/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;}