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>

  • 相关阅读:
    【JAVA】【集合12】Java中的TreeMap
    【JAVA】【集合11】Java中的HashMap
    【JAVA】【集合10】Java中的Map接口
    main.c:24:22: fatal error: pk11func.h: No such file or directory
    C语言——随笔の想啥说啥(待续)
    大华摄像头报警接口中图片加密,python调用c++方式实现解密
    win10 下安卓源码同步小技巧
    repo sync error: .repo/manifests/: contains uncommitted changes
    Pycharm连接远程Linux服务器的虚拟环境
    利用 Django 动态展示 Pyecharts 图表数据的几种方法
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5286389.html
Copyright © 2011-2022 走看看