브라우저 창에서 이미지를 수평 중앙에 배치하기 위한 예제 코드 공유
- 零下一度원래의
- 2017-07-20 15:02:511262검색
더 이상 잡담하지 마세요. 코드로 뛰어들어 얼마나 이해할 수 있는지 확인해 보세요.
<!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="img/3.jpg" alt="" id="img-center" onmousewheel="return bbimg(this)">
</body>
</html>위 내용은 브라우저 창에서 이미지를 수평 중앙에 배치하기 위한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.