背景imgに合わせてdivの高さを自動調節するScript

最終更新日:2012年11月15日 / 作成日:2012年11月05日

ボックスの背景イメージをパターンなどで指定することはよくあります。この場合ボックスの高さに合わせて背景がリピートされて入る形になります。

それを逆にした方法。
パターンイメージを途中で切れさせたくない場合の対処法です。

ルーズリーフの穴は途中で切れたりしません

当サイトの記事はご覧の通りルーズリーフパターンですので、穴が途中で切れてしまうと変です。だからと言って記事やコメントの内容に合わせて高さが可変するのは当然のことですので、そこのところをScriptで補ってみました。

JavaScriptソースです。
[crayon]
/* 初期設定
***********************/
var base_img_h = 29; // 背景パターン1つ分の高さ

/* メイン_01(記事ID取得)
************************/
function setPostHeight(id){
$(id).css(‘height’, Math.round($(id).height() / base_img_h) * base_img_h + “px”);
};
[/crayon]

var base_img_h = 29;

変数で定義したのは「背景パターン1つ分の高さ」です。

$(id).css(‘height’, Math.round($(id).height() / base_img_h) * base_img_h + “px”);

関数の中身です。任意の場所から呼び出し、引数として渡されてきたid(classも可)の高さを再調整します。

「背景パターン1つ分の高さ」を超える端数を切り捨てる形で、余分にリピートしようとしている背景パターンを削除しています。

ただしパターンになる画像の高さが高すぎる場合はちょっと変かもしれません。