主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: fit the image to window size

                
tags: JavaScript
デモ


ブラウザに読み込まれたイメージを、ブラウザのウィンドウサイズにフィットさせる(縦横比はそのまま)。
Chromeではimg.srcに画像をつっこんでも、imgのメンバにアクセスできない。画像のロードが済んでからでないといけない。だからオンロードイベント内でメンバにアクセスして処理を行う。
<img src="hoge" onload="fitImage2Window(event);">

function fitImage2Window(e)
{
var img = new Image()
img.onload = function(target)
{
return function(innerEvent)
{
var w = innerEvent.target.width;
var h = innerEvent.target.height;
var ratioWidth = w / window.innerWidth;
var ratioHeight = h / window.innerHeight;
if (ratioWidth >= ratioHeight)
{
target.width = window.innerWidth * 1.0;
target.height = h * (window.innerWidth / w);
}
else
{
target.height = window.innerHeight * 1.0;
target.width = w * (window.innerHeight / h);
}
}
}(e.target);
img.src = e.target.src;
}
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。