Imageオブジェクト

コンストラクタ

new Image([unsigned long width, unsigned long height])
Image() - Web API Interfaces | MDN

プロパティ

型 プロパティ
String src
unsigned long width
unsigned long height
Properties - HTMLImageElement - Web APIs | MDN

Internet Explorerにおける、widthとheightプロパティ

Internet Explorerではwidthとheightプロパティを設定するときに、次の点に注意する必要があります。

srcプロパティの設定順序

画像のURLを指定するsrcプロパティは、それを設定した時点で画像の読み込みが行われます。このときInternet Explorerではwidthとheightに読み込んだ画像のサイズが自動で設定されるため、srcより先に設定されていたwidthとheightが無効になります。よってwidthとheightの設定は、srcより後に行う必要があります。

設定なし 先に設定 後に設定

widthまたはheightの、いずれかのみの設定

FirefoxやChromeでは、widthまたはheightのいずれかのみを設定した場合には、他方はアスペクト比を保つように自動で設定されます。しかしInternet Explorer 9より前のバージョンではそのように処理されないことがあるため、明示的に指定する必要があります。width attribute | width property (Internet Explorer) | MSDN

設定なし heightのみ widthとheight

スタイルによる、widthやheightの設定

スタイルでwidthやheightが設定されているimage要素はそのスタイルが適切に適用されないことがあるため、widthやheightの属性を削除します。

var image = document.createElement( 'img' );
image.src = 'sample.jpg';

image.removeAttribute( 'width' );
image.removeAttribute( 'height' );

img { height: 100px; }

何もしない widthとheightを設定
(width='50' height='50')		 widthとheightを削除

参考

関連ページ

JavaScriptのドキュメントから検索