2010年1月29日金曜日

固定サイズの要素の中にアスペクト比を保って画像を表示する方法

固定サイズの要素の中にアスペクト比を保って画像を表示する方法をメモしておきます.

var frameElement = document.createElement("div");
frameElement.style.width = XXX + "px";
frameElement.style.height = YYY + "px";
var imageElement = document.createElement("img");
frameElement.appendChild(imageElement);
dojo.connect(imageElement, "onload", function() {
var aspectRatio = this.width / this.height;
if(aspectRatio > frameElement.style.width / frameElement.style.height) {
this.style.width = frameElement.style.width;
}
else {
this.style.height = frameElement.style.height;
}
});