ブートストラップグリッド内で画像を反応的に重ねる方法

Question

私は自分の作品を見せてくれる小さなプロジェクトのホームページを作っています。メインページでは、最近更新されたコレクションを、オフセットが小さいカードのように積み重ねて表示したいと思っています。各スタックには独自のグリッド列が割り当てられます。

これは私がこれまで持っているものである：それはテンプレートエンジンによって生成されているためhttp://www.bootply.com/Dus21AApn5

<div class="container-flow"> 
    <h2> Recent Collection Updates</h2> 
     <div class="row" style="margin: 0.05%;"> 
     <div class="col-sm-4 col-xs-6"> 
      <div style="position: absolute; 
         max-height: 200px; 
         margin: auto; 
         overflow: hidden; 
         top: 0px; 
         left: 0px; 
         z-index: -0; 
         -webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2); 
         -moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2); 
         box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);"> 
       <img style="max-width: 200px;" class="img-responsive" src="http://placehold.it/250x350"> 
      </div> 
      ... 
     </div> 
     <div class="col-sm-4 col-xs-6"> ... </div> 
     <div class="col-sm-4 col-xs-6"> ... </div> 
     </div> 
    </div> 

コードは（私は後でCSS-ファイルにすべてのスタイルを移動します）少し厄介です。

私はそれが画像がお互いに積み重ねられているように見えるようになっていますが、残念ながら同時にブートストラップグリッドの応答性を壊しました。グリッド列はもはやスタックしておらず、互いにマージします。私はそれが絶対に設定されている画像を含むdivの位置に起因すると考えました。私は自分の画像を積み重ねる方法と同時に反応性を見つけることができません。

インターネットをしばらく検索しましたが、解決策が見つかりませんでした。私はWebフロントエンドではないので、HTML/CSSなどの経験はほとんどありません。

誰かが私に解決策を与えたり、正しい方向に向けると、自分で修正できるので、いいですね。

可能であれば、JavaScriptを追加しないでください。

Answer 1

これは解決策ですが、ブートストラップグリッドセル（col - * ...）内のすべてのdivが絶対配置されているため、オーバーラップを避けるためにjqueryスクリプトで高さを指定する必要がありました。

.imageBanner { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 40vw; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    .imgBanner { 
 
    height: 30vw; 
 
    } 
 
} 
 

 
.image1 { 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 

 
.image2 { 
 
top: 0; 
 
    left: 10%; 
 
    z-index: -2; 
 
} 
 

 
.image3 { 
 
    top: 0; 
 
    left: 20%; 
 
    z-index: -3; 
 
} 
 
.imageBanner div { 
 
    width: 75%; 
 
    max-height: 85%; 
 
    display: block; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2); 
 
    -moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2); 
 
    box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2); 
 
} 
 
.imageBanner div img { 
 
    width: 100%; 
 
     
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-flow"> 
 
    <h2 class=""> Recent Collection Updates</h2> 
 

 
    <div class="row" style="margin: 0.05%;"> 
 
     <div class="col-sm-4 col-xs-6"> 
 
      <div class="imageBanner"> 
 
       <div class="image1"> 
 
        <img src="https://unsplash.it/600/400/" class="img-responsive"> 
 
       </div> 
 
       <div class="image2"> 
 
        <img src="https://unsplash.it/400/600/" class="img-responsive"> 
 
       </div> 
 
       <div class="image3"> 
 
        <img src="https://unsplash.it/500/500/" class="img-responsive"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4 col-xs-6"> 
 
      <div class="imageBanner"> 
 
       <div class="image1"> 
 
        <img src="https://unsplash.it/800/600/" class="img-responsive"> 
 
       </div> 
 
       <div class="image2"> 
 
        <img src="https://unsplash.it/200/200/" class="img-responsive"> 
 
       </div> 
 
       <div class="image3"> 
 
        <img src="https://unsplash.it/600/800/" class="img-responsive"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="clearfix visible-xs-block"></div> 
 
     <div class="col-sm-4 col-xs-6"> 
 
      <div class="imageBanner"> 
 
       <div class="image1"> 
 
        <img src="https://unsplash.it/300/400/" class=""> 
 
       </div> 
 
       <div class="image2"> 
 
        <img src="https://unsplash.it/600/600/" class=""> 
 
       </div> 
 
       <div class="image3"> 
 
        <img src="https://unsplash.it/400/200/" class=""> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

また、あなたはここで、画像の介在の別の変形を表示することができます：https://stackoverflow.com/a/41048391/4206079