レスポンシブなイメージのストレッチ - y軸に基づくグリッド？

Question

私は理論的には私にはかなり基本的なものに私の歯を噛んでいます。灰色のコンテナが拡大された画像である

：

は、その後90度に回転させ...通常の応答我々は、ブートストラップのように、毎日使うグリッド、基礎などについて考えてみよう既知のアスペクト比（3：2）で表示されます。青いコンテナは、大きな画像に完全にフィットする正方形の画像（親指）の既知の数です。ピンクのボーダーはコンテナで、固定された高さを受けています（012v1のように、html,body{height:100vh}）。すべての画像は片面が100％、もう片面は自動です。

したがって、「グレー」画像はコンテナに引き伸ばされ、親指が続いているはずです。本当に、古典的なRWDの振る舞い - ちょうどy軸上。

私が試してみた：

古典的なグリッドを

• フレキシボックス（親コンテナを伸ばしながら、ここではない、その呼び出しは、アスペクト比、メンテナンスに役立ちません）、必要な幅を計算します％の列（理論的にはうまくいくが、ブラウザの丸めが不規則になります）
• display: table（100％の高さがでキックしていない、と何のROWSPANはありません、恐ろしい、巣にそれらを試してみました）
• はい、テーブル！ （これのアスペクト比に基づいてストレッチするメイン画像を取得できませんでした、そしてもちろん、smallscreenのための親指をスタックすることはできません）

だから、戻ってスタートに行く：で、それは可能ですすべてこれを純粋なHTML/CSSでheight: 100%, width: autoスタイルビヘイビアを再現するには？

「はい」の場合は、どの方法を使用しますか？

いいえ、なぜ、JS回避策としてお勧めしますか？

PS私はすでに財団のequalizerスクリプトを試しましたが、これもまた高さを計算する際の丸め誤差です。

PPS：zurb foundation 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>