Pocket

レスポンシブサイトをコーディングする際、「画像を背景に当てたdivの高さをどう指定すればいいかわからない…」「youtubeの埋め込み動画を横幅100%にしたいけど、縦が小さくなってしまう…」と困ったときに便利な、jQueryで比率計算する方法をご紹介します。

方法は簡単!比率の計算式に、取得した値を当てはめていくだけです。
デモはこちら
必要なコードは以下です。(jQueryの読み込み必須)

javascript


今回は横幅に合わせて、という想定でご紹介しましたが、高さと幅を反対にすれば高さに合わせた比率計算も可能です。
使える場面はいろいろとあると思いますので、ぜひご活用ください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。