jQuery制作图片的等比例缩放

最新推荐文章于 2022-12-28 16:05:04 发布

我爱丁丁猫

最新推荐文章于 2022-12-28 16:05:04 发布

阅读量151

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1i0ba00bcjb&title=jQuery%E5%88%B6%E4%BD%9C%E5%9B%BE%E7%89%87%E7%9A%84%E7%AD%89%E6%AF%94%E4%BE%8B%E7%BC%A9%E6%94%BE

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

1资料的排版

2.html代码

1 <body>
2 <div class="BB"><img src="dw.jpg"  alt="动物" onload="setPic($(this))"/></div>
3 <div class="BB"><img src="dw1.jpg"  alt="动物" onload="setPic($(this))"/></div>
4 <div class="BB"><img src="yy.jpg" alt="人" onload="setPic($(this))" /></div>
5 </body>

3.css代码

<style type="text/css">
    .BB{ width:100px; height:80px; border:1px solid red; overflow:hidden; margin-top:10px; float:left; margin-left:10px; text-align:center; line-height:100px; position:relative;}
    img{position:relative;}
    </style>

4.js代码

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var BNImg = {
            iconW: 100,
            iconH: 80,
            getOriginPicWandH: function (imgObj) {
                return { width: imgObj.width(), height: imgObj.heght() };
            },
            setPicWandH: function (imgObj) {
                var originW = imgObj.width();
                var originH = imgObj.height();
                var maxWorH = originW >= originH ? { w: originW} : { h: originH };
                var originRate = originW / originH;
                if (maxWorH.w) {
                    imgObj.width(BNImg.iconW);
                    var newH = BNImg.iconW / originRate
                    imgObj.height(newH);
                    var top = (BNImg.iconH - newH) / 2;
                    imgObj.css("top",top "px");
                }
                else if (maxWorH.h) {
                    imgObj.height(BNImg.iconH);
                    imgObj.width(originRate * BNImg.iconH);
                }
            }
        };        
        function setPic(obj) {
            BNImg.setPicWandH(obj);
         }