/最終更新日:2019/06/30TechniquejQuery・JS以前、「【jQuery】コピペでOK!画像や動画を全画面にフィットさせて中央に表示する」という記事を書きました。実際に使っていると、なんだかと痒いころに手が届かない、使い勝手の悪いコードだなと気付きました。バージョンアップしたコードを作成したので、こちらで解説していきます。まとめ前回のjQueryコードの改良したいところボックスのサイズ限定じゃなくて、色々なサイズのボックスにフィットさせたい前回まではブラウザ全画面に広がったボックスにサイズが限定されていました。サイズ限定のコードでは柔軟性がありませんので、フィットさせたい要素をラップする親要素のサイズを取得してフィットさせるよう改良します。これで全画面のメインビジュアルでも、記事サムネイルみたいな小さなイメージでも、1つのコードで対応できるようにします。jQueryだけで完結したいこれも使ってて気づいたのですが、jQueryのコード内でCSSの「top」とかは設定してるのに、「position:absolute」はスタイルシートで設定していました。「position:absolute」を設定し忘れると意図した表示にならずバグります。ラップする親要素も「position:relative」と「overflow:hidden」の設定が必須ですが、それもスタイルシートで設定していたので、同様にスタイルを設定し忘れるとバグります。CSSをいじらずjQueryのみで完結するようにします。ベースのHTML・CSSまずはベースのHTML・CSSをご確認ください。src="sample.jpg"></div>フィットさせたい要素「.fitimg」を、ラップしている親要素「.parentbox」にフィットさせます。400px;}また親要素「.parentbox」は必ず高さが指定してあることが前提となります。高さの指定がないと、内包する「.fitimg」が「position:absolute」になるため何も表示されなくなってしまいます。サンプルでは一度サンプルをご確認ください。サンプルサイト上部にメインビジュアルがあり、画像がフィットしています。記事サムネイルも同様に画像がフィットしています。ブラウザのサイズを変えても常にフィットします。全ての画像はサイズが違います。メインビジュアルと記事サムネイルのボックスサイズも違います。このように色々なサイズのボックスサイズに対応できるよう、柔軟な仕様になっています。HTMLではそれぞれのコードを説明していきます。WEBDESIGNDAY</p></footer>2行目メインビジュアル部分、「.js-fit-hero」をラップする親要素の「.hero」にフィットさせます。記事サムネイル部分、「.js-fit-post-img」をラップする親要素の「.post__img」にフィットさせます。post__img」に高さを設定しています。前回までは、CSSでフィットさせたい要素に「position:absolute」、ラップする親要素に「position:relative」と「overflow:hidden」を設定しないとjQueryのコードが正しくてもバグっていました。(汗)今回は見てもらえばわかるように、CSS側では親要素もフィットさせたい要素もCSSは設定しません。この後のjQueryで完結させます。moveY});}2・5行目この後説明しますが、作成した関数で「fitImg(‘フィットさせたい要素’)」とするだけで親要素にフィットさせます。5行目は記事サムネイルの部分ですが、同じ要素が複数ある場合は、それぞれのサイズを正しく取得するため、「each」内に「this」で要素を指定しましょう。画像は読み込み完了を待ってから処理しないと意図しない表示になるので「load」内で処理を記載しています。9行目ウィンドウがリサイズされてもフィットするように「resize」内にも同じ処理を記載します。関数「fitImg」を作成しました。こちらの中の処理を改良しました。フィットさせたい要素の親要素をjQueryで取得するようにしました。前回まではwindowのサイズ限定でしたが、柔軟に対応できるようになりました。47・48・52行目ここが前回まではスタイルシートで設定していたスタイルです。設定し忘れると表示がバグるというひどいことになっていた部分です。jQuery内で親要素もフィットさせたい要素もスタイルを設定するので、スタイルシートをいじる必要はなくなりました。これに気づかないのか。要素をフィットさせているロジックをざっくり説明します。親要素の幅と高さそれぞれを、フィットさせたい要素の幅と高さで割って拡大率を出します。幅と高さの拡大率の大きい方を取得します。これによって、親要素に対してフィットさせたい要素の方が必ず大きくなり、見切れることがなく全体にフィットします。次にセンターに配置する処理です。フィットさせたい要素が親要素よりはみ出した数値の半分を取得します。先ほどの数値の分、top・leftそれぞれマイナスに指導させることでセンター配置になります。cover」と同じ処理になります。動画もフィット動画も全く同じですがサンプル作成しましたので見てみてください。「img」タグが「video」タグになっただけです。サンプル2もちろん前回記事のように親要素が全画面であれば全画面にフィットします。サンプル3jQuery本体はCDNで設置してますが本記事では割愛します。CDNでの設置方法は下記をチェックしてみてください。チェック【jQuery】CDNならこのサイトが超便利!jsDelivrの使い方2017.11.09画像は動画は下記のサイトからダウンロードしました。素敵な素材がたくさんあります。https://unsplash.comhttps://www.pexels.com/videos/まとめまだまだ至らないところばかりなので、今回の記事のように、以前書いたしょーもないコードなどは気づいたら即アップデートしていきます。今回はバグ修正みたいな感じでしたが、CSSやjQueryはきっとこれからさらに進化していくので、それを使うこちらも、情報・テクニックをアップデートしていく必要があります。今まで当たり前になっていたことも、もっといい方法があるならやってみるべし!というチャレンジ精神は常に持っていたいものです。Day.GALLERYINSPIRATIONCONTACTTGIC。