今天碰到一个有意思的问题，用原生的js限制图片的宽度

来源：互联网发布：人工智能经济学论文编辑：程序博客网时间：2024/05/16 06:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>限制图片的宽</title>      </head>    <body bgcolor="#fffde4">    <h1 class="slugline" >        </h1>        <p class="byline">            <span class="credit">by <span class="author"></span><br /></span>            <span class="postdate"></span>        </p>            <div id="content" style="width:100%">            <div id="image"><a id="thumbnailLink" href="image">                <br /></a>                <a href="image"><div>View <span id="imageCount">image</span></div>            </a></div>            <p class="dek"></p><div id="body" style="width:100%"><img id="fuckyou" style="width:500px;height:300px;" src="http://ebaby.doctorcom.com:8080/Ebaby/public/upload-files/schoolnews/11695/images/1375164472.jpg" alt=""></img></div>        </div>    </body>    <script type="text/javascript" charset="utf-8">        function resizeImages() {var imgs=document.getElementById('content').getElementsByTagName('img');var imgsLength=imgs.length;var maxwidth=300;for(var i=0;i<imgsLength;i++){var myimg = imgs[i];if(myimg.width > maxwidth){var oldwidth=myimg.width;myimg.style.height =myimg.height*(maxwidth/oldwidth);myimg.style.width = maxwidth;}}}//缩放图片到合适大小resizeImages();    </script></html>

就是因为加了doctype之后就看不到效果，是改变不了这张图的长和宽，把它删了就可以了。

ps:限制长宽的判断

if(myWidth>maxWidth){   myWidth=maxWidth;   myHeight=myWidth*objImagePreloader.height/objImagePreloader.width;}if(myHeight>maxHeight){   myHeight=maxHeight;   myWidth=myHeight*objImagePreloader.width/objImagePreloader.height;}if(myWidth>maxWidth){   myHeight=maxWidth*myHeight/myWidth;   myWidth=maxWidth;}if(myHeight>maxHeight){   myWidth=maxHeight*myWidth/myHeight;   myHeight=maxHeight;}