js实现大图片等比例缩放

1.描述
首先看缩放前：
在这里插入图片描述
缩放后效果：

2.实现：
主要是在下面的body标签上调用onload

<body onload="ResizeImages()">

<div class="w1170">
    <div class="pLeft">
        <div class="data_list">
            <div class="data_list_title">
                <i class="layui-icon layui-icon-app"></i>
                <span class="head">帖子信息</span>
            </div>
            <div class="article">
                <div class="title" th:text="${article.name}"></div>
                <div class="info">
                    <a href="" target="_blank" th:text="${article.user.userName}"></a>&nbsp;&nbsp;
                    分享于&nbsp;&nbsp;<font th:text="${#dates.format(article.publishDate,'yyyy-MM-dd')}"></font>
                    &nbsp;&nbsp;查看次数：&nbsp;<font th:text="${article.view+' 次'}"></font>
                    &nbsp;&nbsp;所需：<font color="red" th:text="${article.points}"></font>&nbsp;积分
                </div>
                <div align="center">
                    <div class="bshare-custom"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
                </div>
                <div class="downloadBtn">
                    <button class="layui-btn layui-btn-radius" onclick="download()">&nbsp;&nbsp;立即下载&nbsp;&nbsp;</button>
                    <button class="layui-btn layui-btn-radius" onclick="vipDownload()" style="background-color: red">&nbsp;&nbsp;VIP免积分下载&nbsp;&nbsp;</button>
                </div>

                <div id="content" class="content" th:utext="${article.content}"></div>
            </div>
        </div>
</div>



<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/common.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['element'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var tMenu = [[${session.tMenu}]];
        console.log(document.getElementById(`${tMenu}`));
        $("#"+tMenu).css("color","red");
    });

    /*]]>*/
</script>
</body>

common.js:

// 将图片按比例缩放
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=800;
   var maxheight=1000
   var imgs = document.getElementById('content').getElementsByTagName('img');   //濡傛灉浣犲畾涔夌殑id涓嶆槸article锛岃淇敼姝ゅ


   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];


     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}

Take^that

发布了98 篇原创文章 · 获赞 7 · 访问量 1万+

私信关注

js实现大图片等比例缩放

猜你喜欢