브라우저 창에서 이미지를 수평 중앙에 배치하기 위한 예제 코드 공유-JS 튜토리얼-php.cn

브라우저 창에서 이미지를 수평 중앙에 배치하기 위한 예제 코드 공유

零下一度

풀어 주다： 2017-07-20 15:02:51

원래의

1260명이 탐색했습니다.

더 이상 잡담하지 마세요. 코드로 뛰어들어 얼마나 이해할 수 있는지 확인해 보세요.

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!