javascript控制图片自适应容器大小

最新推荐文章于 2024-06-30 16:22:52 发布

原创最新推荐文章于 2024-06-30 16:22:52 发布 · 876 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #div #html

网站设计与实现专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片自适应其容器大小的方法。通过调整图片的高度和宽度，确保图片能在不同尺寸的容器内正常显示，并保持居中对齐。

在网页中往往会在某些容器(DIV)中放置一些图片，但是我们在设计网页的时候一定要控制好图片的大小，不然图片太大就会把页面撑的非常难看。

下面给出用JavaScript实现图片缩放效果代码，可以随意控制图片的输出大小。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片自适应容器大小 零度综合信息发布系统 LdCMS!NT</title>

<script type="text/javascript">
        /*
         *
         * 功能：图片自适应容器大小
         * 说明：本功能可以实现图片自适应图片容器(可有可无)的大小，
         *       并居中于容器中央
         * 使用：<img src="http://bbs.0duinfo.com/upload/2011/02/12/34/2473323406406.jpg" 
         *                                    |                             />
         *                                    ↓                                                      ↓          ↓          ↓
         * 参数：                    图片路径                                   要设置的对象 容器宽度 容器高度
         * 作者：[关中游侠]
         * 日期：2009-4-7
         * 来自：http://www.0duinfo.com
         * 
        */
        function SetImg(obj,maxW,maxH)
        {
            var imgH=obj.height;
            var imgW=obj.width;
            
            if(obj.height>maxH)
            {
                obj.height=maxH;
                obj.widht=(obj.width*(maxH/imgH));
                imgH=maxH;
                imgW=obj.width;
            }
            
            if(obj.width>maxW)
            {
                obj.width=maxW;
                obj.height=(maxW/imgW)*imgH;
                imgW=maxW;
                imgH=obj.height;
            }
            
            obj.style.marginTop=(maxH-obj.height)/2;
            obj.style.marginLeft=(maxW-obj.width)/2;
        }
    </script>

</head>
<body>
    <!--图片容器开始 为了方便查看效果 故将容器背景设置为红色 注：此容器可以没有-->
    <div style="height:400px;width:400px;background-color:Red;">
        <img src="http://bbs.0duinfo.com/upload/2011/02/12/34/2473323406406.jpg" alt="" />
    </div>
    <!--图片容器结束-->
</body>
</html>