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>

  • 相关阅读:
    js查找字符串中重复的子字符串
    未知盒子宽高使盒子垂直水平居中
    标准盒模型和怪异盒模型的差异
    Vue练习(跑马灯效果)
    node后端中MVC与前端中的MVVM之间的区别
    ES6中对Promise解析
    ES6中对箭头函数的使用
    ES6对map解析
    ES6中对Set解析
    ES6解构赋值全了解
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5286389.html
Copyright © 2011-2022 走看看