代码改变世界

jquery控制图片按比例缩放

2009-12-22 12:54  cnb_mtime  阅读(330)  评论(0编辑  收藏  举报
$(function() {
        
var boxWidth = 675;
        
var boxHeight = 450;
        
var imgWidth = $("#img1").width();
        
var imgHeight = $("#img1").height();
        
//比较imgBox长宽比img长宽比
        if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {
            
//重新设置imgwidthheight
            $("#img1").width((boxHeight * imgWidth) / imgHeight);
            $(
"#img1").height(boxHeight);
            
//让图片居显示
            var margin = (boxWidth - $("#img1").width()) / 2;
            $(
"#img1").css("margin-left", margin);
        }
        
else {
            
//重新设置imgwidthheight
            $("#img1").width(boxWidth);
            $(
"#img1").height((boxWidth * imgHeight) / imgWidth);
            
//让图片居显示
            var margin = (boxHeight - $("#img1").height()) / 2;
            $(
"#img1").css("margin-top", margin);
        }
    });