首页 > Web开发 > 详细

图片在图片框内,自适应宽高,避免拉伸

时间:2014-02-23 16:41:45      阅读:411      评论:0      收藏:0      [点我收藏+]

图片列表中,为了看上去整齐,将图片放在框内,自适应宽高,避免拉伸的js方法。


javascript代码如下:

<script type="text/javascript">

        //imgBubuko:要放图片的img元素,onload时传参可用this

        //h:img元素的高度,像素

        //w:img元素的宽度,像素
        function bubuko_Autosize(imgBubuko, h, w) {
            var image = new Image();
            image.src = imgBubuko.src;
            if (image.width < w && image.height < h) {
                imgBubuko.width = image.width;
                imgBubuko.height = image.height;
            }
            else {
                if (w / h <= image.width / image.height) {
                    imgBubuko.width = w;
                    imgBubuko.height = w * (image.height / image.width);
                }
                else {
                    imgBubuko.width = h * (image.width / image.height);
                    imgBubuko.height = h;
                }
            }

        }
    </script>


html中应用例子:


<img src=“img/bubuko.jpg” alt="布布扣,bubuko.com"  border="0" onload="bubuko_Autosize(this,123,123);" />


bubuko.com提供,转载请注明来自布布扣。

图片在图片框内,自适应宽高,避免拉伸

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!