Example code sharing for horizontally centering images in the browser window-JS Tutorial-php.cn

Example code sharing for horizontally centering images in the browser window

零下一度

Release： 2017-07-20 15:02:51

Original

1228 people have browsed it

Without further ado, just jump into the code and see how much you can understand.

<!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>

Copy after login

The above is the detailed content of Example code sharing for horizontally centering images in the browser window. For more information, please follow other related articles on the PHP Chinese website!