主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

HTML で画像サイズの比率固定したまま高さ幅制限

最終更新日 2007-10-15 05:13:26 (1年以上前の記事です)


動的な HTML で様々なイメージサイズが想定されるイメージの width と height の比率は固定したまま、一定の高さと幅のスペースに収めたいときがある。
例えば AxB サイズの画像の幅と高さを固定したまま、 300x200 のスペースに収めたいという感じ。
高さが幅より高いときもあれば幅が高さより広い場合もある。
そんな時は css の max-width と max-height を使うと便利。


ただこれは IE6 では対応していないので、じゃーどうしようか。

まず IE6 では css に expression 関数が使える。これは、 css に動的に値を代入するためのものだ。
例えば、

width: expression("300" + px);
っていうのは
width: 300px;
と等しい。

これと Javascript をうまく使って max-width/height を実装すればよい。
まずは javascript から。とりあえずオリジナル画像の幅と高さを返す関数を作る。

function getImageWidth(myid)
{
	var newImg = new Image();
	newImg.src = document.getElementById(myid).src;
	var width = newImg.width;
	return width;
}

function getImageHeight(myid)
{
	var newImg = new Image();
	newImg.src = document.getElementById(myid).src;
	var height = newImg.height;
	return height;
}

次に CSS の部分

max-width:300px;
max-height:200px;

width: expression((getImageWidth('picture') > getImageHeight('picture')) ? "300px" : "auto");
height: expression((getImageHeight('picture') > getImageWidth('picture')) ? "200px" : "auto");

で、実際の html の部分はこうなる。

<img src = "abc.jpg" id = "picture" />
最終更新日 2007-10-15 05:13:26

コメント このエントリーをはてなブックマークに追加

フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank2, rank3, rank7, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google