レスポンシブサイトをコーディングする際、「画像を背景に当てたdivの高さをどう指定すればいいかわからない…」「youtubeの埋め込み動画を横幅100%にしたいけど、縦が小さくなってしまう…」と困ったときに便利な、jQueryで比率計算する方法をご紹介します。
方法は簡単！比率の計算式に、取得した値を当てはめていくだけです。
デモはこちら。
必要なコードは以下です。（jQueryの読み込み必須）
javascript
|
1 2 3 4 5 6 7 |
$(window).on('load resize',function() { //ウィンドウを読み込んだ時、リサイズされた時に動く var WindowWidth = $(window).width(); //ウィンドウ幅の値を取得して定義 $('クラス名またはID名').css('height',(背景画像の高さ * WindowWidth) / 背景画像の横幅 + "px" ); //要素のheightに比率計算した値を代入 }); |
今回は横幅に合わせて、という想定でご紹介しましたが、高さと幅を反対にすれば高さに合わせた比率計算も可能です。
使える場面はいろいろとあると思いますので、ぜひご活用ください！
