adiary開発日誌

画像の縦横中央配置

HTMLのソース。余計な改行やスペースを入れないこと。

<div class="image"><span class="dummy"></span><img src="xxx.png" /></div>

CSS。

div.image {
	border:		1px solid #8ff;

	min-width:	320px;
	width:		320px;
	height:		240px;
	_width:		322px;
	_height:	242px;

	text-align:	center;
	display:	block;
}
div.image span.dummy {
	height:		240px;
	width:		0px;
	vertical-align:	middle;
	display:	inline-block;
}
div.image img {
	max-width:	320px;
	max-height:	240px;
	vertical-align:	middle;

	/* IE6 hack */
	_margin-top:	-1px;
	/* IE6 でアスペクト比保存縮小のためのhack */
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}
*:first-child+html div.image img { /* IE7 hack */
	margin-top:	-1px;
}

• 画像領域は320*240。
• モダンブラウザは問題なく表示。
• IE6は後方互換モード、IE7は標準準拠モード+ie8.js。
• "margin-top: -1px;"してあげないと画像がなぜか下に1pxずれてしまう。

「span.dummy」を「display: inline-block」するのが縦方向センタリングのポイントです。

IE6で縦横比保存なmax-width, max-height

img {
	max-width:	320px;
	max-height:	240px;
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}

240と320を好みのサイズに変更してください。

適当に追記します。

• 雑多なおさらい
• オブジェクト（っぽいもの）の生成
• メンバ関数をコールバックさせる　方法１
• メンバ関数をコールバックさせる　方法２

雑多なおさらい

• JavaScriptのクラスの概念はないらしい。
• プリミティブな数字や文字列など意外は、すべてオブジェクトであり参照。
• 参照なので代入した側でメンバ変数をいじると、代入元も書き換わる。
• 関数を変数に代入できる。

  var f = function (x){ alert(x); }
  f("msg");    // "msg"と表示される
  

Perl5のオブジェクトに似たところがありますが、クラス名前空間（パッケージ）を持たないため、Perl5よりも簡素な実装と言えそうです。

続きを読む