首页 > 代码库 > 图片在浏览器窗口水平居中展示（图片尺寸不限制）
图片在浏览器窗口水平居中展示（图片尺寸不限制）
闲言碎语不多说，直接上代码，转载请备注来源地，代码自己看自己悟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片在浏览器窗口水平居中展示（图片尺寸不限制）</title>
<style>
* {
margin: 0;
padding: 0;
background: #606060
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
#img-center {
width: 800px;
margin: 0 auto;
display: block;
margin-top: 2%;
margin-bottom: 2%;
cursor: zoom-in;
}
</style>
<script>
window.onload = function() {
/*小于浏览器屏幕时居中 */
var docuH = document.body.clientHeight,
domH = document.getElementById("img-center").offsetHeight,
dom = document.getElementById("img-center");
if(domH < docuH) {
var csstext = "position:absolute;top:50%;margin-left:-400px;left:50%;margin-top:-" + domH / 2 + "px;";
dom.style.cssText = csstext;
}
};
/*滚动定位*/
function bbimg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if(zoom > 0) o.style.zoom = zoom + ‘%‘;
return false;
}
</script>
</head>
<body>
<img src=http://www.mamicode.com/"img/3.jpg" alt="" id="img-center" onm ousewheel="return bbimg(this)">
</body>
</html>
图片在浏览器窗口水平居中展示（图片尺寸不限制）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。