图片自适应窗口大小,该如何解决
日期：2014-05-19 浏览次数：20462 次
图片自适应窗口大小
我在做产品图片展示时
图片显示用代码：
onLoad= 'javascript:if(this.width> =this.height&&this.width> =100){this.width=100};if
(this.height> this.width&&this.height> =100){this.height=100}; '
这样可以使图片自适应大小．．
但为什么每次打开图片有的会撑得很大，只有再刷新一下才不会．
有没有更好的方法可以控制图片自适应大小．．
．．．．．．．．．．．．．．．．．．．．．．．
在http://community.csdn.net/Expert/topic/5401/5401875.xml?temp=.1382105我提问过，可是没人给我确定答案啊．．
------解决方案--------------------
是不是有个onsize事件,在这个事件里写应该问题不太大吧.
------解决方案--------------------
js就是用onLoad，没见过你的情况
------解决方案--------------------
放在 image里不行吗，
也可以用个iframe来控制
------解决方案--------------------
百度的做法：
function DownImage(ImgD,MaxWidth,MaxHeight,alignX,alignY)
{
alignX=alignX||1;
alignY=alignY||1;
var image=new Image();
image.src=ImgD.src;
if(image.width> 0 && image.height> 0)
{
var rate = (MaxWidth/image.width < MaxHeight/image.height)?MaxWidth/image.width:MaxHeight/image.height;
var wid=0;
var hid=0;
if(rate <= 1)
{
wid=ImgD.width=image.width*rate;
hid=ImgD.height=image.height*rate;
}
else
{
wid=ImgD.width=image.width;
hid=ImgD.height=image.height;
}
if(alignX==1)
{
var ii=(MaxWidth-wid)/2;
ImgD.style.marginLeft=ImgD.style.marginRight=ii+ "px ";
}
if(alignY==1)
{
var ii=(MaxHeight-hid)/2;
ImgD.style.marginTop=ImgD.style.marginBottom=ii+ "px ";
}
}
}
使用：img 对象的 onload= "DownImage(this,100,100,-1,1); "
------解决方案--------------------
//--楼主可以参看如下代码http://blog.csdn.net/hertcloud/archive/2007/03/26/1541528.aspx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type= "text/css ">
.goNote { background-color:#738B3F;width:128;
border:1px;font-size:12px;padding:5px;color:white;cursor:pointer; }
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function autoResize(o)
{
if (o.width> 128)
{
o.width = 128;
if (o.parentNode.parentNode.childNodes.length == 1)
{
var note = document.createElement( "div ");
note.innerHTML = " <span class=\ "goNote\ " onclick=\ "getSrcPic(this)\ "> 查看原始图片大小 </span> ";
o.parentNode.parentNode.appendChild(note);
}
else
{
try
{
o.parentNode.parentNode.childNodes(1).style.display = "block ";
}
catch (e) { }
}
}
}
function getSrcPic(o)
{
var t = o.parentNode.previousSibling.firstChild;
if (t.tagName.toLowerCase() == "img ")
{
t.removeAttribute( "width ");
t.removeAttribute( "height ");
o.parentNode.style.display = "none ";
//try { o.parentNode.removeNode(true) } catch (e) { o.parentNode.style.display = "none "; }
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> <a href= "javascript:void(0) "> <img id= "myimg " src= "h
我在做产品图片展示时
图片显示用代码：
onLoad= 'javascript:if(this.width> =this.height&&this.width> =100){this.width=100};if
(this.height> this.width&&this.height> =100){this.height=100}; '
这样可以使图片自适应大小．．
但为什么每次打开图片有的会撑得很大，只有再刷新一下才不会．
有没有更好的方法可以控制图片自适应大小．．
．．．．．．．．．．．．．．．．．．．．．．．
在http://community.csdn.net/Expert/topic/5401/5401875.xml?temp=.1382105我提问过，可是没人给我确定答案啊．．
------解决方案--------------------
是不是有个onsize事件,在这个事件里写应该问题不太大吧.
------解决方案--------------------
js就是用onLoad，没见过你的情况
------解决方案--------------------
放在 image里不行吗，
也可以用个iframe来控制
------解决方案--------------------
百度的做法：
function DownImage(ImgD,MaxWidth,MaxHeight,alignX,alignY)
{
alignX=alignX||1;
alignY=alignY||1;
var image=new Image();
image.src=ImgD.src;
if(image.width> 0 && image.height> 0)
{
var rate = (MaxWidth/image.width < MaxHeight/image.height)?MaxWidth/image.width:MaxHeight/image.height;
var wid=0;
var hid=0;
if(rate <= 1)
{
wid=ImgD.width=image.width*rate;
hid=ImgD.height=image.height*rate;
}
else
{
wid=ImgD.width=image.width;
hid=ImgD.height=image.height;
}
if(alignX==1)
{
var ii=(MaxWidth-wid)/2;
ImgD.style.marginLeft=ImgD.style.marginRight=ii+ "px ";
}
if(alignY==1)
{
var ii=(MaxHeight-hid)/2;
ImgD.style.marginTop=ImgD.style.marginBottom=ii+ "px ";
}
}
}
使用：img 对象的 onload= "DownImage(this,100,100,-1,1); "
------解决方案--------------------
//--楼主可以参看如下代码http://blog.csdn.net/hertcloud/archive/2007/03/26/1541528.aspx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type= "text/css ">
.goNote { background-color:#738B3F;width:128;
border:1px;font-size:12px;padding:5px;color:white;cursor:pointer; }
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function autoResize(o)
{
if (o.width> 128)
{
o.width = 128;
if (o.parentNode.parentNode.childNodes.length == 1)
{
var note = document.createElement( "div ");
note.innerHTML = " <span class=\ "goNote\ " onclick=\ "getSrcPic(this)\ "> 查看原始图片大小 </span> ";
o.parentNode.parentNode.appendChild(note);
}
else
{
try
{
o.parentNode.parentNode.childNodes(1).style.display = "block ";
}
catch (e) { }
}
}
}
function getSrcPic(o)
{
var t = o.parentNode.previousSibling.firstChild;
if (t.tagName.toLowerCase() == "img ")
{
t.removeAttribute( "width ");
t.removeAttribute( "height ");
o.parentNode.style.display = "none ";
//try { o.parentNode.removeNode(true) } catch (e) { o.parentNode.style.display = "none "; }
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> <a href= "javascript:void(0) "> <img id= "myimg " src= "h
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
