响应式图像拉伸 - 基于y轴的网格?
问题描述:
从理论上讲,我咬牙切齿似乎对我来说很基本。响应式图像拉伸 - 基于y轴的网格?
想想,我们每天都在使用,如引导,基础等常规响应电网...然后旋转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加载了大部分上述内容(因为我想坚持使用它来查看页面的其他部分),所以也许它会干扰一些尝试?
答
正如上文所述,你可以在https://*.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>
嘿,那么左侧的框数量可能会发生变化,那么您需要他们做出相应的响应?或者会一直有8个? –
在我的情况下总会有一个固定的/已知的数字(如8)。干杯(今天签约) – Urs
这里是我的同事做的一个小提琴:http://jsfiddle.net/ursbraem/cvLcx5qk/6/使用flex和padding-bottom hack – Urs