特定の子要素の高さにラッパーの高さをバインドする

Question

ダブルラッパーにさまざまな高さの要素がいくつか含まれているセットアップがあります。それらはすべて、display: inline-blockとvertical-align: topによって互いに隣り合わせに配置され、そのうちの1つは「アクティブ」とみなされます。

<section class="gallery"> 
    <div class="gallery__content"> 
     <img class="gallery__item gallery__item--img" src="assets/GIRM/1.png" width="350" heigth="197"> 
     <img class="gallery__item gallery__item--img" src="assets/GIRM/2.png" width="1280" heigth="800"> 
     <img class="gallery__item gallery__item--img" src="assets/GIRM/3.png" width="1280" heigth="511"> 
     <img class="gallery__item gallery__item--img" src="assets/GIRM/4.png" width="1135" heigth="742"> 
    </div> 
</section> 

私はoverflow: hiddenが高いです何をカットして、アクティブな子の高さ（どちらかのレベルで）ラッパーの高さを制限したいです。今、私はouterWrapper.maxHeight = activeChild.heightを設定するためにjsを使ってこれを達成します。

しかし、子供はimgだけでなく任意の要素にすることができ、子供の高さが変わることはありません。現在のjsでは、これらの発生をキャッチして、新しい値の最大高さを再適用する必要があります。移行によって高さが変わると、さらに悪化します。

いずれかのラッパーの高さをcssの特定の子要素の高さにバインドする方法はありますか？それは高さ計算のための他のすべての要素を無視することでしょうか？そうでなければ、jsでこれを行うより良い方法はありますか？

Answer 1

thisは機能しますか？怠け者のための

コード：

HTML

<section> 
    <div id="under-wrapper"> 
    <img class="child" id="child1" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="150"> 
    <img class="child active" id="child2" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="300"> 
    <img class="child" id="child3" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="350"> 
    <img class="child" id="child4" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="200"> 
    </div> 
    <div id="over-wrapper"> 
    <img class="child" name="child1" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="150"> 
    <img class="child active" name="child2" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="300"> 
    <img class="child" name="child3" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="350"> 
    <img class="child" name="child4" src="https://pro.buysellads.com/p/manage/asset/id/28341" height="200"> 
    </div> 
</section> 

CSS（マイナス美学）

section { 
    position: relative; 
    overflow: hidden; 
} 

#over-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

img { 
    vertical-align: top; 
    width: 120px; 
    opacity: 0.3; 
} 

img.active { 
    opacity: 1; 
    display: inline-block; 
} 

#under-wrapper img { 
    visibility: hidden; 
} 

#under-wrapper img:not(.active) { 
    display: none; 
} 

JS（まあ、jQueryの）

$('img').click(function() { 
    $('img').removeClass('active'); 
    $(this).addClass('active'); 
    var child = $(this).attr('name'); 
    $('#'+child).addClass('active'); 
}); 

私はどのようにしましたか？

1. Iは（絶対位置決めさ子要素を含むように）overflow:hidden（余分を遮断する）とposition:relativeでsectionラッパーを追加しました。
2. 後でアクセスしやすくするために、id属性がnameに置き換えられていることを除いて、同じ内容のの2つの内部ラッパーを作成しました。
3. 私は最初の内部ラッパー（under-wrapper）だけを残しました（それは正常に動作することができます）が、2番目の（over-wrapper）は絶対に配置されました。これは、このラッパーの内容がsectionの高さに影響しないようにするためです。
4. 私はactiveクラスのルールを作成し、そのunder-wrapperで非アクティブイメージがdisplay:noneている間、アクティブなものがdisplay:inline-blockとvisibility:hiddenです。これはアクティブな画像だけがsectionの高さに影響を与え、残りは隠されることを意味します。一方、上の画像はすべてそこに座って素敵に見える必要があります。
5. JavaScriptはシンプルです。アクティブなクラスを与え、他のすべての人を取り除く画像上のクリックハンドラです。上のイメージをクリックすると、そのイメージの名前（ 'child1'、 'child2'など）が取得され、一致するIDを持つ対応する下位イメージが選択され、アクティブなクラスになります。

これが完全にあなたの質問に答えることはできない、または私がルールを破った場合、私は私のソリューションを変更してうれしいです。たぶん誰かがそれを使って、同じ要素の2つのセットを伴わない、より便利で効率的な解決策を見つけることができます。