JS怎么设置图片居中

JavaScript027

JS怎么设置图片居中,第1张

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function Zoom(obj,width, height)

{ var img=new Image()

img.src=obj.src

var scale=Math.max(width/img.width, height/img.height)

var newWidth=img.width*scale

var newHeight=img.height*scale

var div=obj.parentNode

obj.width=newWidth

obj.height=newHeight

div.style.width=width+"px"

div.style.height=height+"px"

div.style.overflow="hidden"

obj.style.marginLeft=(width-newWidth)/2+"px"

obj.style.marginTop=(height-newHeight)/2+"px"}

</script>

</head>

<body>

<div>

<img src="http://pic.hsw.cn/0/10/13/05/10130520_504118.jpg" onload="Zoom(this, 150, 100)" border="0" />

</div>

</body></html>

<div id=mydiv style="width:400pxheight:300pxborder:1px solid #000">请注意看这里的背景图是否居中</div>

<script>

window.onload=function() {

document.getElementById("mydiv").style.background="url(123.jpg) no-repeat center center"

}

</script>