怎么让图片以固定尺寸加载
日期：2014-05-16 浏览次数：20397 次
如何让图片以固定尺寸加载
我的网页里面几张图片太大，所以我用了下面的自适应缩放图片大小的js控制
<script type="text/javascript">
function ChangePic(temp)
{
document.getElementById("PicShow").src = temp;
document.getElementById("PicLink").href = temp;
}
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script>
<img alt="点击看大图" src="1.jpg" onload="DrawImage(this,200,200);" />
但是在网页加载的时候，图片还是先按照原始大小加载，就会临时把页面撑大，加载完后才会按照这个js代码缩放，有没有办法让图片加载的时候就按照某种大小呢。
------解决方案--------------------
<img> 本身就有width,heigth的属性的。
为什么舍近求远，用js呢。
你用JS的话，肯定会看到图片缩小的过程的。图片越大，越明显。
------解决方案--------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight>maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute('width');
}
}
</script>
</head>
<body>
<div style="font-size:10pt;">
注1：设定图片的最大宽度或高度，同时保证图片比例。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About IMG">JK_10000@yahoo.com.cn</a><br/>
<hr/>
</div>
<IMG id="big_img2"
src="20060925132517e9cb7.gif" width="200" onload="setMaxHeight(this,300);">
</body>
</html>
------解决方案--------------------
搂主,可以这么做!
<img alt="点击看大图" src="1.jpg" style="overflow:hidden;width:200px;height:200px;" onload="DrawImage(this,200,200);" />
这样就不会因为加载的时候看见页面临时变大了!
我的网页里面几张图片太大，所以我用了下面的自适应缩放图片大小的js控制
<script type="text/javascript">
function ChangePic(temp)
{
document.getElementById("PicShow").src = temp;
document.getElementById("PicLink").href = temp;
}
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script>
<img alt="点击看大图" src="1.jpg" onload="DrawImage(this,200,200);" />
但是在网页加载的时候，图片还是先按照原始大小加载，就会临时把页面撑大，加载完后才会按照这个js代码缩放，有没有办法让图片加载的时候就按照某种大小呢。
------解决方案--------------------
<img> 本身就有width,heigth的属性的。
为什么舍近求远，用js呢。
你用JS的话，肯定会看到图片缩小的过程的。图片越大，越明显。
------解决方案--------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight>maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute('width');
}
}
</script>
</head>
<body>
<div style="font-size:10pt;">
注1：设定图片的最大宽度或高度，同时保证图片比例。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About IMG">JK_10000@yahoo.com.cn</a><br/>
<hr/>
</div>
<IMG id="big_img2"
src="20060925132517e9cb7.gif" width="200" onload="setMaxHeight(this,300);">
</body>
</html>
------解决方案--------------------
搂主,可以这么做!
<img alt="点击看大图" src="1.jpg" style="overflow:hidden;width:200px;height:200px;" onload="DrawImage(this,200,200);" />
这样就不会因为加载的时候看见页面临时变大了!
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
