折りたたみボックス（画像メニュー）

Question

私は友人のためのウェブサイトを作ろうとしており、彼は自分のホームページ上にあるHubSpotのような効果を望んでいます。ブラウザでHubSpotを開くと、私が望む効果はメインナビゲーションのすぐ下にあります。左に2枚の画像があり、ホバリングすると右の画像が変わります。私はこの効果の適切な用語が何であるか分かりません。

私はほとんどウェブサイトを終了しましたが、このHubSpotエフェクトのCSS実装は少しバグがあります。サムスンギャラクシーS5、iPhone 5、およびRetina Display付きMacコンピュータでウェブサイトを訪問すると、左下の画像が崩壊します。各画像は、親の高さのちょうど半分でなければなりません。私はHubSpotが持っているのとまったく同じ効果を達成したいと思います。

なぜ私は左側の下の画像が崩壊しているのか分かりません。ここに私のコードでJSFiddleへのリンクがあります。私は本当にあなたの助けに感謝します！

私は1920x1080 HD解像度の私の単純なモニタでは、この崩壊する問題なしでウェブサイトがうまく動作するので、高解像度と "Retina"ディスプレイと関係があると思います。

HTML：

<div class="row column hOuter"> 
    <div class="small-12 medium-6 hLeftParent columns"> 
      <div class="small-12 medium-6 columns hLeft1"> 
       <span> 
        <h3>Workshops</h3> 
        <p>Get creative. Become certified.</p> 
        <a class="btn-transparent" href="#">Learn More</a> 
       </span> 
      </div> 
      <div class="small-12 medium-6 columns hLeft2"> 
       <span> 
        <h3>Blog</h3> 
        <p>Coming Soon</p> 
       </span> 
      </div> 
    </div> 

    <div class="small-12 medium-6 hRight columns"> 
     <span> 
      <h3>Download</h3> 
      <p>Get certified and join this new approach to event design!</p> 
      <a class="btn-transparent" href="#">Book Now!</a> 
     </span> 
    </div> 
</div> 

CSS

.hOuter { 
    max-width: initial; 
    height:100%; 
    border:0.25rem solid #fff; 
} 

.hOuter, hOuter div { 
    margin:0 auto; 
    padding:0; 
    box-sizing: border-box; 
} 

.hLeftParent { 
    height:100%; 
    overflow:hidden; 
    background: transparent; 
    padding:0; 
} 

.hLeft1, 
.hLeft2 { 
    background: transparent; 
    min-width:100%; 
    height:50%; 
    min-height:50%; 
    display:table; 
    overflow:hidden; 
    padding:0; 

} 

.hLeft1 span, 
.hLeft2 span, 
.hRight span { 
    text-align: center; 
    color:#fff; 
    display:table-cell; 
    vertical-align: middle; 
    min-width:100%; 
} 


.hLeft1 { 
    border-bottom:0.125rem solid #fff; 
    height:30rem; 
    min-height:30rem; 
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0/cover; 
} 

.hLeft2 { 
    border-top:0.125rem solid #fff; 
    height:30rem; 
    min-height:30rem; 
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0/cover;  
} 

.hOuter .hRight { 
    background: #ccc; 
    border-left:0.25rem solid #fff; 
    background: url("http://placekitten.com/g/200/300") no-repeat center bottom/cover; 
    padding:0; 
    height:100%; 
    display: table; 
} 

.hOuter .hRight span { 
    background-color: rgba(91,91,91, 0.8); 
} 

Answer 1

うーん、私が正しくあなたの質問を理解していますかどうかわかりません。あなたは左の容器に2つの異なる高さを宣言したようです。 Left2の宣言を削除しようとしました& Left2と私はあなたが望む効果があると思います。

.hLeft1 { 
    border-bottom:0.125rem solid #fff; 
    /*height:30rem;*/ 
    /*min-height:30rem;*/ 
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0/cover; 
} 

.hLeft2 { 
    border-top:0.125rem solid #fff; 
    /*height:30rem;*/ 
    /*min-height:30rem;*/ 
    background: url("http://placekitten.com/g/200/300") no-repeat 0 0/cover;  
}