显示图片,如果实际图片不和设定的图片大小的比例,ie会自动拉伸到填充整个设定的区域为止,这样图片会失真.有没有办法调整显示的图片的大小
显示图片,如果实际图片不和设定的图片大小的比例,ie会自动拉伸到填充整个设定的区域为止,这样图片会失真.有没有办法调整显示的图片的大小,不失真且顶到最大? 问题点数：20、回复次数：8Top
1 楼phantomsea（随机姓名）回复于 2006-03-08 09:33:32 得分 0
在<img>标签中不要设定宽、高Top
2 楼ronanljy2（）回复于 2006-03-08 10:38:05 得分 0
我需要限制一定的比例显示大小.比如限定20*20的范围,来一张40*30的图片,那么实际显示出来就是20*15的大小.Top
3 楼phantomsea（随机姓名）回复于 2006-03-08 11:03:59 得分 20
用offsetWidth方法
例如你想设定宽度恒定的图片，在教本里边加入
imgW = document.all.imgID.offsetWidth;
imgH = document.all.imgID.offsetHieght;
document.all.imgID.height = (imgH * 20) / imgW;
其中imgID就是目标<img>标签的id
Top
4 楼ronanljy2（）回复于 2006-03-08 16:33:06 得分 0
送大家一个函数:自动设置图片大小到一个指定范围使图片不失真.
<img id="img1" src="image/b02-1.gif">
<script language="Javascript">
setPic("img1",120,120);
function setPic(imgid,wt,ht){
try{
wf = document.all[imgid].offsetWidth;
hf = document.all[imgid].offsetHeight;
if(Number(wf/hf)>Number(wt/ht)){
document.all[imgid].width = wt;
document.all[imgid].height = Number(wt*hf/wf);
}else{
document.all[imgid].height = ht;
document.all[imgid].width = Number(ht*wf/hf);
}
}catch(err){}
}
</script>
但是有新问题,这样如果一排图片会显得很乱,如何给每张图片加上一个指定大小的白色或者其他颜色的底或者底图?Top
5 楼zeroleonhart（Strong Point:Algorithm）回复于 2006-03-08 20:10:57 得分 0
回楼上：把你的图片放到一个div里面，设定div的背景色Top
6 楼ronanljy2（）回复于 2006-03-17 12:15:52 得分 0
请问下面这个页面,如何把图片置中?图片自己换一下.picBack1.gif是背景色,或者底图,image/b02-1.gif是要显示的图片
=====================================
<body onload="bodyOnload()">
<div style="WIDTH:124; HEIGHT:124; background-image:url(image/picBack1.gif);">
<img id="img1" src="image/b02-1.gif">
</div>
<script language="Javascript">
function bodyOnload(){
setPic("img1",120,120);
}
//图片自动转换函数
function setPic(imgid,wt,ht){
try{
wf = document.all[imgid].offsetWidth;
hf = document.all[imgid].offsetHeight;
if(Number(wf/hf)>Number(wt/ht)){
document.all[imgid].width = wt;
document.all[imgid].height = Number(wt*hf/wf);
}else{
document.all[imgid].height = ht;
document.all[imgid].width = Number(ht*wf/hf);
}
}catch(err){}
}
</script>
</body>
Top
7 楼ronanljy2（）回复于 2006-03-29 00:32:35 得分 0
upTop
8 楼ronanljy2（）回复于 2006-03-31 09:55:08 得分 0
再次upTop
