ブラウザの画面幅を取得するコードは以下のページを参考にした。
参考：ブラウザの画面サイズの取得(javascript) - Object Design Blog
画像の読み込み完了前に拡大縮小率を計算しないように、img の load 完了イベント時に、画像の幅を取得するのがポイント。以下、コードの一部抜粋。
<head>
<script type="text/javascript">
var imgW = 0;
var imgH = 0;
var paneW = 0;
var scale = 100;
//ブラウザ幅に合わせて拡大縮小率を算出する
//マージンは20px
function calcScale(){
var paneW_alt = paneW - 20;
if(imgW > paneW_alt){
scale= ((paneW_alt/imgW)*100).toFixed(0);
}else{
scale = 100;
}
}
function getBrowserWidth() {
if(window.innerWidth) {
return window.innerWidth;
}
else if(document.documentElement && document.documentElement.clientWidth != 0){
return document.documentElement.clientWidth;
}
else if(document.body){
return document.body.clientWidth;
}
return 0;
}
</script>
</head>
<body marginheight="0" marginwidth="0">
(中略)
<script type="text/javascript"><!--
var img = document.getElementById("dlImg");
//画像のload完了時に画像の幅と高さを取得する
img.addEventListener('load', getImageSize, false);
function getImageSize(){
imgW = img.width;
imgH = img.height;
}
//画像の幅と高さを取得した上で画像をリサイズする
img.addEventListener('load', resize, false);
//端末が回転された際もブラウザ幅に合わせて再度リサイズする
window.addEventListener('orientationchange', resize, false);
function resize(){
paneW = getBrowserWidth();
calcScale();
if(imgW > 0 && imgH > 0){
img.width=(imgW * (scale/100)).toFixed(0);
img.height=(imgH * (scale/100)).toFixed(0);
}
}
//--></script>
</body>
0 件のコメント :
コメントを投稿