【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい

  • はてブ

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。
かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。

今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。
ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。

01

仕組みとしては、全体のウインドウのheightを取得して、上記のheaderと要素Aの高さを引き算した高さをメインビジュアル部にCSSとして適用すればOKです。
headerと要素Aの高さは指定しなくても動作はしますですが、しておいた方が安心です。


デモはこちら
ZIPでダウンロード

Step1:まず下準備

まず必要なファイルを読み込みます。
headerの中に、jQueryと、自分で作ったjavascriptのファイル(今回は mainHeight.js とします)を読み込みます。




Step2:次にHTMLの準備

今回は、メインビジュアルのIDだけ設定して頂ければ自由に組んで構いません。id=”mainVisual“を付けています。




Step4:jsを書き込む

読みこんだjsファイル、 mainHeight.js に処理を書いていきます。




説明を詳しく書くとこう。




今日はfunction化を使用してみました。こちらは後日解説したいですね。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ