图片在容器充满居中显示代码,Css代码库,德仔网

代码语言

代码分类

【Css】图片在容器充满居中显示

作者: / 发布于2017/6/6/ 492

图片在容器充满居中显示

源码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片在容器充满居中显示</title>
        <style type="text/css">
            .container{
                width: 100px;
                height: 100px;
                overflow: hidden;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="image/2.jpg" />
        </div>
        <div class="container" style="width: 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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label