• div中的img垂直居中


    <html>
        <head>
             <style type="text/css"> 
                 .imgDiv { 
                     overflow: hidden; 
                     display:table; 
                     border-spacing:10px; 
                     position: absolute;
                     left: 50%;
                     top: 50%;
                     width: 900px;
                     height: 600px;
                     margin-left: -450px;
                     margin-top: -300px;
                 } 
                 .imgDiv li {
                     width:900px; 
                     height:600px; 
                     text-align:center; 
                     vertical-align:middle;
                     position:relative; 
                     margin: 10px; 
                     *float:left; 
                     display: table-cell; 
                 } 
                 .imgDiv .imgDivs { 
                     *position:absolute; 
                     top:50%; 
                 } 
                 .imgDiv .imgDivs img {
                     *position:relative; 
                     top:-50%; 
                     left:-50%;
                     max-width:900px;
                     max-height:600px;
                     width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" ); 
                     height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" ); 
                 }
            </style>
        </head>
        <body>
            <div class="imgDiv">
                <li><div class="imgDivs"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li> 
            </div> 
        </body>
    </html>
    max-900px;
    max-height:600px;
    expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" ); 
    height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" ); 

    其中这几句是对于img大小的处理,如果img大小超出div容器的大小,会按照这个进行缩放显示,如果img没有超出div容器的大小,会正常显示,img原来多大,就显示多大
  • 相关阅读:
    vue 爬坑之路---设置背景图,不能resolve编译
    vue 爬坑之路----flexible.js不适配ipad和ipad pro
    vue-cli3 vue.config.js配置
    vue组件
    Vue 路由按需keep-alive
    vue-cli项目搭建
    http和https
    js时间戳和日期互转换
    vue补充
    js实现头像上传(移动端,PC端均可)
  • 原文地址:https://www.cnblogs.com/dongming-03/p/5735372.html
Copyright © 2020-2023  润新知