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

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

<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>

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

posted @ 2016-09-29 16:33  承载梦想-韩旭明  阅读(1174)  评论(0编辑  收藏  举报