ie下调整图片长宽的问题
应同事要求,做了个展示图片的网页,来协助他用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;
}