2013年10月1日火曜日

【jQuery】ブロックサイズに合わせて画像をフィット表示

jQueryも勉強.
はるーか昔にJavascriptで画面遷移なしに表示の更新…
などはやっていたのだが,サクっと忘れており
Ajaxを勉強するためにJavascriptも勉強.
jQuery?はナニソレ状態からスタート.
(響き的にDBを扱う何かかと思ってた…)

今回やるのは
エリア内に画像を表示させるが,
縦横比を崩さずにできるだけ大きく表示する.
ということ.

CSSだけだとどうしても縦横比が崩れるか画面いっぱい表示されないか
という結果になったが,
ブロックのサイズが取得でき,
ウインドウサイズ更新のたびに操作をできる
Javascriptって便利だな.

今回,
画像を配置するブロックをid="area"
画像自身をid="item"
とする.

これを描画時とウインドウサイズ更新時に呼び出す.

何も考えずにCやJavaなどと同じような文法で掛けるのって素敵.

0 件のコメント:

コメントを投稿