图片在容器充满居中显示

最新推荐文章于 2024-07-11 16:50:01 发布

df13131

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量138

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gdcgy/p/5286389.html

版权

效果图：
源码如下：
<!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>

转载于:https://www.cnblogs.com/gdcgy/p/5286389.html

df13131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片在容器充满居中显示

效果图：源码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片在容器充满居中显示</title> <style type="text/css">...
复制链接

扫一扫