码迷,mamicode.com
首页 > Web开发 > 详细

写个js动态调整图片宽高 (原创)

时间:2014-06-29 13:08:57      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   width   

bubuko.com,布布扣
<body style="TEXT-ALIGN: center;">
<div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184">
        <img src="http://e.hiphotos.baidu.com/image/pic/item/024f78f0f736afc385a0f0e7b119ebc4b6451280.jpg" style="display:none;">
</div>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script >
    var selector = $("#testID").find("img"); //选择器
    selector.hide();
    var containerWidth = 173 * 1; //173:容器宽度 1:宽度填充百分之百
    var containerHeight = 184 * 0.9; //184:容器高度 0.9:高度填充百分之九十


    
    //等所有图片都加载完毕再动态计算图片宽高进行调整
    window.onload=DynamicSetImageWithHeight;
    
    //动态调整宽高函数
     function DynamicSetImageWithHeight() {
        selector.each(function () {
            var width = $(this).width();
            var height = $(this).height();
            if (width > containerWidth) {
                height = height * containerWidth / width;
                width = containerWidth;
            }

            if (height > containerHeight) {
                width = width * containerHeight / height;
                height = containerHeight;
            }
            width = parseInt(width);
            height = parseInt(height);
            $(this).css({ width: width.toString() + "px", height: height.toString() + "px" });
        });
        selector.fadeIn();
    };
</script>
bubuko.com,布布扣

 

写个js动态调整图片宽高 (原创),布布扣,bubuko.com

写个js动态调整图片宽高 (原创)

标签:style   blog   http   java   color   width   

原文地址:http://www.cnblogs.com/zhudongchang/p/3769922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!