码迷,mamicode.com
首页 > 其他好文 > 详细

图片特效-让图片自适应框的大小

时间:2016-09-29 17:36:23      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:

——————————————————————————————

<script type="text/javascript">        
            function init(){
                var img = document.getElementById(‘the_img‘);
                var width = img.width;
                var height = img.height;
                var div = img.parentNode;
                var w = div.offsetWidth;
                var h = div.offsetHeight;
                if(width < w && height < h)
                    return;
                if(width/height > w/h){
                    img.width = w - 20;
                    img.height = (w-20) * (h-20) / width;
                }
            }
        </script>

——————————————————————————————

<style>
            div{width:100px;height:200px;border:1px solid black;margin:10px auto;padding:10px;}
        </style>

——————————————————————————

<body style="text-align:center" onload="init();">
        <div>
            <img src="1.jpg" id="the_img"/>
        </div>
    </body>

————————————————————————————

图片特效-让图片自适应框的大小

标签:

原文地址:http://www.cnblogs.com/hanxuming/p/5920392.html

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