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