摺疊盒（圖片菜單）

Question

我想爲朋友製作一個網站，他希望在他的主頁上產生類似HubSpot的效果。如果您在瀏覽器中打開HubSpot，我想要的效果就在主導航下。它是左側的兩幅圖像，當它被掀開時，右側的圖像發生變化。我不知道這個效應的合適名詞是什麼。

我差不多完成了網站，但是這個HubSpot效果的CSS實現是一個小錯誤。當我的三星Galaxy S5，iPhone 5和帶Retina顯示器的Mac電腦訪問網站時，左下方的圖像會崩潰。每張圖片應該完全是家長高度的一半。我想達到與HubSpot完全相同的效果。

我不明白爲什麼左側的底部圖像崩潰。這裏是我的代碼鏈接到JSFiddle。我將衷心感謝您的幫助！

我認爲它與高分辨率和「視網膜」顯示有關，因爲在我的1920x1080高清分辨率的簡單顯示器上，網站工作得很好，沒有這個崩潰問題。

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

嗯，不知道如果我正確地理解你的問題。你似乎已經在左邊的容器中聲明瞭兩個不同的高度。我嘗試刪除Left1 & 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;  
}