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

動的な 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" />

コメント