响应式图像拉伸 - 基于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>