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 foundation 6加载的大部分内容（因为我想在页面的其他部分坚持使用它），所以它可能会干扰某些尝试？

Answer 1

如上所述，您可以使用填充和高度0，在https://stackoverflow.com/editing-helprticle http://www.mademyday.de/css-height-equals-width-with-pure-css.html阅读本文，我也做了一个测试，希望是您正在寻找的，请查看{ {3}}

// 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>

响应式图像拉伸 - 基于y轴的网格？

1 个答案: