Jquery 图片等比缩放

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_30519071

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beiz/p/5439248.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片等比缩放</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<style>
    img{
        width: 400px;
        height: 200px;
    }    
</style>
<body>
    <img src="img/1.jpg" id="img1" οnlοad="DrawImg(this.id, 730, 454)" />
</body>
<script>
        $(function() {
            function DrawImg(imgId, boxWidth, boxHeight) {
                alert(boxWidth);
                var imgWidth = $("#" + imgId).width();
                var imgHeight = $("#" + imgId).height();
                //比较imgBox的长宽比与img的长宽比大小
                if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {
                    //重新设置img的width和height
                    $("#" + imgId).width((boxHeight * imgWidth) / imgHeight);
                    $("#" + imgId).height(boxHeight);
                    //让图片居中显示
                    var margin = (boxWidth - $("#" + imgId).width()) / 2;
                    $("#" + imgId).css("margin-left", margin);
                } else {
                    //重新设置img的 width和height
                    $("#" + imgId).width(boxWidth);
                    $("#" + imgId).height((boxWidth * imgHeight) / imgWidth);
                    //让图片居中显示
                    var margin = (boxHeight - $("#" + imgId).height()) / 2;
                    $("#" + imgId).css("margin-top", margin);
                }
            }
        })

    </script>
</html>

转载于:https://www.cnblogs.com/beiz/p/5439248.html

weixin_30519071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 图片等比缩放

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片等比缩放</title> <script src="js/jquery-1.8.3.min.js"></script>...
复制链接

扫一扫