ぬえさぶろうのAnimate放送部

解説

コンテンツのつくりかた

1. 各要素の高さを比較して最大サイズを取得する
2. 取得したサイズを全ての要素の高さを適用する

HTML

<div class="all_height_display">
          <div class="all_height">
               <img src="../../../images/news/zoom.png" class="all_height_image" alt="">
                <p>カーソルがサムネール上にあるか判定する。</p>
            <!--/.all_height--></div>
          <div class="all_height">
              <img src="../../../images/news/zoom.png" class="all_height_image" alt="">
                <p>フォーカスエリアをカーソルに追従させる。</p>
                <!--/.all_height--></div>
          <div class="all_height"> 
              <img src="../../../images/news/zoom.png" class="all_height_image" alt="">
                <p>一定時間ごとに画像のフェードイン/フェードアウトを行う</p>
            <!--/.all_height--></div>
          <div class="all_height"> 
              <img src="../../../images/news/zoom.png" class="all_height_image" alt="">
                <p>元画像のサイズは400×400</p>
            <!--/.all_height--></div>
          <div class="all_height"> <img src="../../../images/news/zoom.png" class="all_height_image" alt="">
            <p>ズーム画像のサイズは、4000px *4000px</p>
            <!--/.all_height--></div>
          <!--/.all_height_display--></div>

CSS

/*高さを揃える*/
.all_height_display{
    display:flex;
    flex-direction:row;
    width:768px;
    height:auto;
    margin:0 auto;
    padding:0.5em;
    background:#fff;
}
.all_height{
    display:block;
    width:17%;
    background:#E5DECA;
    margin:0 1%;
    padding:1%;
    overflow:hidden;
}
.all_height_image{
    width:60px;
    height:auto;
    margin:0 auto;
}
.all_height p{
	padding:0.5em;
    background:#fff;
}

JS

// 高さを揃える
$(function(){
    /*高さの最大限を代入するための変数h*/
    var h=0;
    //それぞれの要素の高さを調べる
    $(".all_height p").each(function(){
        if($(this).height() > h){
            h = $(this).height();
            /*高さにプラス10ピクセル*/
            h = h + 10;
        }
    });
    /*要素の高さを変数hの値を統一*/
    $(".all_height p").css("height", h + "px");
});