"/> L'image est affichée horizontalement et centrée dans la fenêtre du navigateur (la taille de l'image n'est pas limitée)">
recherche

Maison >interface Web >js tutoriel >Exemple de partage de code pour centrer horizontalement les images dans la fenêtre du navigateur

Exemple de partage de code pour centrer horizontalement les images dans la fenêtre du navigateur

零下一度
零下一度original
2017-07-20 15:02:511276parcourir

Plus de bavardage, sautez simplement dans le code et voyez tout ce que vous pouvez comprendre. 

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel sur la façon de modifier la taille des colonnes de n'importe quelle tableArticle suivant：Tutoriel sur la façon de modifier la taille des colonnes de n'importe quelle table

Articles Liés

Voir plus