響應式圖像拉伸 - 基於y軸的網格？

Question

從理論上講，我咬牙切齒似乎對我來說很基本。

想想，我們每天都在使用，如引導，基礎等常規響應電網...然後旋轉90度吧：

灰色容器是放大圖像具有已知的寬高比（3：2）。藍色容器是已知數量的方形圖像（大拇指），非常適合大圖像。粉紅色的邊框是容器，它已經收到固定的高度（如html,body{height:100vh}的50vh）。所有圖像都有100％的一面和一面自動。

因此，「灰色」圖像應伸展到其容器，然後拇指應遵循。真的，經典的RWD行爲 - 就在y軸上。

我已經試過：

• Flexbox的（而不是它在這裏呼籲，不與深寬比維護幫助，而拉伸父容器）
• 一個經典的格子，計算的必要的寬度在％列（理論上的作品，但是瀏覽器的四捨五入會導致違規行爲）
• display: table（100％的高度不踢，而且也沒有行跨度，試圖巢他們，太可怕了）
• 是，表！ （根據長寬比無法獲得主圖像，當然，不可能將小拇指堆疊起來用於小屏幕）

因此，要回到起點：是否有可能在所有使用純HTML/CSS重現此height: 100%, width: auto樣式行爲？

如果是的話，哪條路要走？

如果不是，爲什麼，以及您推薦的JS解決方法是什麼？

PS我已經試過基礎的equalizer腳本，再次：在計算高度時舍入錯誤。 PPS：我承認我使用zurb基礎版6加載了大部分上述內容（因爲我想堅持使用它來查看頁面的其他部分），所以也許它會干擾一些嘗試？

Answer 1

正如上文所述，你可以在https://stackoverflow.com/editing-helprticlehttp://www.mademyday.de/css-height-equals-width-with-pure-css.html與填充和高度爲0玩，看了這篇文章，我做了一個測試爲好，希望你在找什麼，看看http://codepen.io/wolfitoXtreme/pen/bEeYep

// CSS 
html { 
    height: 100%; 
} 

body, body * { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    box-sizing: border-box; 
} 

#container { 
    margin: 0 auto; 
    width: 50%; 
    height: 100%; 
    display: block; 
    position: relative; 
    background-color: #000000; 
} 
#container #imgMain { 
    padding-bottom: 75%; 
    width: 100%; 
    top: 50%; 
    left: -25%; 
    margin-top: -37.5%; 
    height: 0; 
    position: absolute; 
    background-color: #cccccc; 
} 
#container #imgMain figure { 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 
#container #imgMain img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
} 
#container #imgGrid { 
    top: 0; 
    right: -50%; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    z-index: 10; 
    background-color: #f0f0f0; 
} 
#container #imgGrid figure { 
    width: 50%; 
    height: 0; 
    padding-bottom: 37.5%; 
    position: relative; 
    float: left; 
} 

// HTML 
<div id="container"> 



     <div id="imgMain"> 

      <figure> 
       <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
      </figure> 

      <div id="imgGrid"> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic02.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic03.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic04.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic05.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic06.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic07.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic08.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
       </figure> 

      </div> 

     </div> 




</div>