<!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>
<style> <!-- .mainBox { width:200px; margin:0 auto; text-align:center; } .imgBox { height:100px; border:#CCFF00 1px solid; margin-top:5px; } #pic { position:relative;/*定位相对*/ border:#33FF33 1px solid; } --> </style>
</head>
<body οnlοad="ReImgSize(document.all.pic)"> <div class="mainBox"> <div class="imgBox"><img id="pic" src="http://www.baidu.com/img/baidu.gif" /></div> <div class="imgBox"><img id="pic" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" /></div> <div class="imgBox"><img id="pic" src="http://pics.taobaocdn.com/bao/album/mall/b2c/qingrou611_0002.jpg" /></div> <div class="imgBox"><img id="pic" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" /></div> </div> </body> </html>
第二种方法：可以自定义宽高
/* imgId: img标签id maxWidth: 图片的最大宽度 maxHeight: 图片的最大高度 调用:<img id=goodslistimg οnlοad='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; }
1686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
