您的位置：首页 > 其它

ie下调整图片长宽的问题

2012-04-28 09:42 99 查看

应同事要求,做了个展示图片的网页,来协助他用c++写的程序展示图片.页面全部用js+css静态实现,代码如下

<html>
<head>
<style>
* {margin: 0;}
div {text-align:center;}
</style>
</head>
<body>
<div>
<img src="res/waitAni1.gif" id="loading"/></div>
<div>
<img src="" id="show" style="visibility:hidden;"/>
</div>
<script>
var urlarg ={};
var img = document.getElementById('show');
var maxHeight = '600';
var maxWidth = '800';
function getarg()
{
var url = decodeURI(window.location.href);
var allargs = url.split("?")[1];
var args = allargs.split("&");
for(var i=0; i<args.length; i++)
{
var arg = args[i].split("=");
urlarg[arg[0]] = arg[1];
}
}
function setXY()
{
var width = img.width;
var height = img.height;
var rate =   width/height;
if(width > maxWidth )
{
width =  maxWidth;
height = width/rate;
}
if(height > maxHeight)
{
height = maxHeight;
width =  height*rate;
}
img.width = width;
img.height = height;
}
function setSRC()
{
if(!urlarg.src)
{
urlarg.src = '';
return;
}
img.onload = function(){
if(urlarg.width)
{
maxWidth = urlarg.width;
}
if(urlarg.height)
{
maxHeight = urlarg.height;
}
document.getElementById('loading').style.display = 'none';
setXY();
marginIMG(img);
img.style.visibility = 'visible';
}
img.src = urlarg.src;
}
function load()
{
getarg();
marginIMG(document.getElementById('loading'));
setSRC();
document.body.oncontextmenu = function (e){return false;};
}
function marginIMG(obj)
{
if(maxHeight > obj.height)
{
obj.style.marginTop =  (maxHeight - obj.height)/2;
obj.style.marginBottom =  (maxHeight - obj.height)/2;
}
if(maxWidth > img.width)
{
obj.style.marginLeft =  (maxWidth - obj.width)/2;
obj.style.marginRight =  (maxWidth - obj.width)/2;
}
}
load();
</script>
</body>
</html>

在制作的过程中发现,当你调整img对象的长或者宽时,另外一项会随着同比改变,于是就有了我的第一版程序

function setXY()

{

if(img.width > maxWidth)

{

img.width = maxWidth;

}

if(img.height > maxHeight)

{

img.height = maxHeight;

}

}

在我的意识中,这个应该会产生不变形的,最长边等于我设定该边的最大值

开始拿了几个图片都没有问题,昨天他换了一个长宽高都很大的图片,竟然变形了.

测试了半天才发现,原来,当你设定了img的一个边以后,再设置另外一个边的时候,先前设置的边不会跟着变化

例如原图 1000*1000 我们要调整其在800*600的范围显示

正确的长宽应该是 600*600

当我将width设置成800的时候 height 变为800

这个时候程序会再次设置height为600

,出乎以外的是,width竟然没有变成600

经过修改代码应该是

function setXY()
{
var width = img.width;
var height = img.height;
var rate =   width/height;
if(width > maxWidth )
{
width =  maxWidth;
height = width/rate;
}
if(height > maxHeight)
{
height = maxHeight;
width =  height*rate;
}
img.width = width;
img.height = height;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航