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

最新推荐文章于 2022-01-13 21:38:10 发布

diagowang

最新推荐文章于 2022-01-13 21:38:10 发布

阅读量657

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/diagowang/article/details/9671523

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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;
}