zoukankan      html  css  js  c++  java
  • 图片在容器充满居中显示

    效果图:
    源码如下:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>图片在容器充满居中显示</title>
            <style type="text/css">
                .container{
                    100px;
                    height: 100px;
                    overflow: hidden;
                    margin-bottom: 10px;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <img src="image/2.jpg" />
            </div>
            <div class="container" style=" 200px;">
                <img src="image/2.jpg" />
            </div>
            <script type="text/javascript">
                function fitImage(objDiv, objImg) {               
                    var divWidth = objDiv.offsetWidth;      //容器的宽
                    var divHeight = objDiv.offsetHeight;    //容器的高            
                    var imgWidth = objImg.width;    //图片的宽
                    var imgHeight = objImg.height; //图片的高
                    var imgScale = '';   //图片缩放倍数
                
                    var divRatio = (divWidth / divHeight);  //容器宽高比
                    var imgRatio = (imgWidth / imgHeight);  //图片宽高比
                   
                    if(divRatio >= imgRatio){
                        imgScale = divWidth / imgWidth;
                    }else{
                        imgScale = divHeight / imgHeight;
                    }
                   
                    objImg.style.width = (imgWidth * imgScale) + 'px';
                    objImg.style.height = (imgHeight * imgScale) + 'px';
                   
                    objImg.style.marginLeft = (divWidth - objImg.width) / 2 + 'px';
                    objImg.style.marginTop = (divHeight - objImg.height) / 2 + 'px';   
                }
            </script>
        </body>
    </html>

  • 相关阅读:
    洛谷1894 [USACO4.2]完美的牛栏The Perfect Stall
    洛谷2417 课程
    洛谷2860 [USACO06JAN]冗余路径Redundant Paths
    洛谷1983 车站分级
    BZOJ1178或洛谷3626 [APIO2009]会议中心
    BZOJ1179或洛谷3672 [APIO2009]抢掠计划
    CF Round #516 (Div. 2, by Moscow Team Olympiad)
    洛谷1262 间谍网络
    NOI导刊 2018河南郑州游记
    BZOJ1001或洛谷4001 [BJOI2006]狼抓兔子
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5286389.html
Copyright © 2011-2022 走看看