ie下で画像の長さと幅を調整する問題
3118 ワード
同僚の要求に応じて、画像を展示するホームページを作って、彼がc++で書いたプログラムで画像を展示することに協力した.ページはすべてjs+cssで静的に実現され、コードは以下の通りである.
制作の過程で、imgオブジェクトの長さや幅を調整すると、もう一つは前年同期比で変わり、私の第1版のプログラムがありました.
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にならなかったなんて
修正されたコードは
<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オブジェクトの長さや幅を調整すると、もう一つは前年同期比で変わり、私の第1版のプログラムがありました.
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;
}