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>

  • 相关阅读:
    怎样解决:未找到路径“……”的控制器或该控制器未实现 IController?
    错误:org.springframework.jdbc.support.SQLErrorCodesFactory
    springbean的生命周期
    注解到处excel
    nio读取文件,输出文件
    AtomicReference
    唯一id
    hashmap1.7的死锁模拟
    数组模拟stack
    环形队列
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5286389.html
Copyright © 2011-2022 走看看