画像の比率を保ったまま枠内に収めて縦横中央表示するCSS(IE8対応)


divタグなどの枠内に画像を入れる時、縦横中央表示にして、かつ、枠のサイズより大きければ枠に収まるように画像の比率は変えずに小さくしたいということがあると思います。というより、先日自分はそういう事態に遭遇しました。

まず、サイズの比率を保ったまま、枠内に収める方法ですが、いろいろ試行錯誤した結果、下記のようにするとうまくいくことが分かりました。

widthとheightは普通、デフォルトがautoなので指定しなくていい場合が多いのですが、autoじゃないと動かないため指定しています。

上記の記述だと、枠(この場合、imgタグの親要素)のサイズより大きければ、max-widthとmax-heightの指定により、それ以上のサイズを超えないようになるので、枠に収まってくれます。最初はてっきり、どちらも100%のサイズになってしまうのではないかと思ったのですが、どうやら大きい方にあわせて縮小されるようです。

次に、縦横中央表示の方法ですが、横は簡単です。親要素に『text-align:center』を指定してやればいいだけです。問題は、縦の中央表示。いろいろ調べてみると、:before擬似要素を使って下記のように書くと、縦横中央表示する方法があることが分かりました。

before擬似要素をinline-blockとし、縦方向の揃えをmiddleとしています。同じく画像のほうもmiddleとすることにより、どちらも縦中央表示になります。ただ、inline-blockにすると余計なスペースができてしまうので、そのスペースを無くすために、枠の要素にfont-size:0の指定をしました(参考:display: inline-block の隙間を詰める方法 | Soraxism)。

ちなみに、IE8には対応していませんが、画像をCSSのbackground-imageで指定し、background-sizeをcontainとすると、枠に収まるようになりますが、この場合、枠のサイズより小さければ画像が拡大して枠のサイズに合わせて表示するようになります(もちろん、そのほうがいいということもあると思います)。

なお、IE8対応しなくていいのであれば、フレックスボックスやtransformを使って縦中央表示できます。

フレックスボックス利用

transform利用

下記にサンプルリンクを載せておきます。background-size:containを使った結果、フレックスボックスを使った結果、transformを使った結果も載せています
フレームサイズ:100×150、画像サイズ:175×200
フレームサイズ:100×150、画像サイズ:200×175
フレームサイズ:175×200、画像サイズ:100×150
フレームサイズ:175×200、画像サイズ:150×100
サイズランダム

jQuery Deferredで作るオリジナル確認ダイアログ


ある意味、前回(オリジナルのダイアログを閉じた時に、元の要素にフォーカスを戻す方法 | while(isプログラマ))のつづき。今回は確認ダイアログ版。

ただ、今回のエントリーはダイアログを作ることではなく、jQuery Deferredの勉強のメモです。最近になってjQuery Deferredについて調べてみました。まだまだ分かっていないことは多いのですが、試しにjQuery Deferredを使った確認ダイアログを作成することにしました。

今回作るのは、標準のconfirmメソッドを使うと下記のようなものです。

つまり、確認ダイアログを表示して、『OK』を押せばYahoo!JAPANへ、『キャンセル』を押せばGoogleへ飛ぶという処理です(キャンセルなら何もしないのが普通じゃないかと思われそうですが、分かりやすいようにどちらも何かしらの動作をするようにします)。

ただ、これだとダイアログのレイアウトを変更できないので、独自のダイアログを作成することに。ついでに、上記のYahoo!やGoogleに飛ぶ処理をjQuery Deferredで実現することにしました。試しに書いてみたコードが下記です。

サンプル:ダイアログのテスト

ようは、OKボタンを押した時にresolveメソッドを呼び、doneメソッドの引数に入れた関数を呼ぶ。キャンセルボタンを押した時にrejectメソッドを呼び、failメソッドの引数に入れた関数を呼ぶという処理をしています。

このぐらいならjQuery Deferredを使う必要はないんですけどね。そもそもキャンセルボタンを押すことが何でreject(異常終了)なのかと突っ込まれそうです。多分、この例はjQuery Deferredを使う例としては間違っていると思います。

ところで、jQuery Deferredを調べていると、Deferredオブジェクトの取得に『new $.Deferred』としているページが多々ありました。なので、Deferredオブジェクトかどうかの判定には『obj instanceof $.Deferred』とすればいいだろうと思ったのですが、結果はfalseになってしまいました。なぜだろう? と思って、jQueryのコードを見てみると、Deferredメソッド内で作成したオブジェクトをreturnしており、Deferred自身のインスタンスを生成しているわけではないようです。jQueryの公式ページのサンプルコードでは、Deferredオブジェクトの取得にnewをつけていません(deferred.promise() | jQuery API Documentation)。やたら、newを付けている解説ページが多いのだけど、なぜそうなったのだろうか・・・。

ところで、今回作成したopenConfirmメソッドでは、promiseメソッドで取得したpromiseオブジェクトを返していますが、ここはDeferredオブジェクトをそのまま返しても結果は変わりません。promiseオブジェクトとの違いとしては、promiseオブジェクトにはresolveやrejectがありません。それだけの違いですが、一般的にpromiseオブジェクトを返すようにするそうです。この辺りは、書きページの『deferred図解』の『なぜわざわざpromiseを渡すのか』を参考にしてください。
参考:jQuery deferredの使い方 – deferredの基本 | CodeGrid

jQuery Deferredはいろいろ応用ができそうな機能です。複数のDeferredオブジェクトを使ってwhenメソッドを使うとか。ただ、自分自身よく分かってないところもあるので、もう少し勉強しようと思います。