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

Posted 2023-02-19

【中文标题】响应式图像拉伸 - 使用基于 y 轴的网格？

【英文标题】：Responsive image stretching - with a grid based on the y axis?

【发布时间】：2016-03-07 07:08:09

【问题描述】：

我正在咬牙切齿地研究一些对我来说似乎很基本的东西——理论上。

想想我们每天使用的常规响应式网格，如引导程序、基础等...然后将其旋转 90 度：

灰色容器是具有已知纵横比 (3:2) 的放大图像。蓝色容器是已知数量的方形图像（拇指），它们完全适合大图像。粉红色的边框是容器，它收到了固定的高度（如html,bodyheight:100vh 的 50vh）。所有图像的一侧为 100%，另一侧为自动。

所以“灰色”图像应该拉伸到它的容器，然后拇指应该跟随。真的，经典的 RWD 行为 - 就在 y 轴上。

我试过了：

Flexbox（这里不是它的调用，在拉伸父容器时对纵横比维护没有帮助） 经典网格，以 % 计算列的必要宽度（理论上可行，但浏览器舍入会导致不规则） display: table（100% 的高度没有出现，而且没有行跨度，试图嵌套它们，太可怕了） 是的，桌子！ （无法根据其纵横比拉伸主图像，当然，也无法堆叠小屏幕的缩略图）

所以回到开头：有没有可能用纯 HTML/CSS 重现这种height: 100%, width: auto 样式行为？

如果是，走哪条路？

如果不是，为什么，以及您推荐什么作为 JS 解决方法？

PS 我已经尝试过 Foundation 的 equalizer 脚本，再次：计算高度时的舍入误差。

PPS：我承认我在加载 zurb Foundation 6 的情况下尝试了上述大部分操作（因为我想在页面的其他部分坚持使用它），所以它可能干扰了一些尝试？

【问题讨论】：

嘿，所以左边的盒子的数量可以改变，然后你需要它们做出相应的反应吗？还是永远有 8 个？

在我的情况下，总会有一个固定/已知的数字（如 8）。干杯（今天签到）

这是我同事做的一个小提琴：jsfiddle.net/ursbraem/cvLcx5qk/6 using flex and padding-bottom hack

您是否尝试过使用 background-size: 覆盖左侧的图像？然后它将始终适合其容器。对于 github.com/louisremi/background-size-polyfill

@NathanielFlick 不应裁剪图像。我真的很难把容器弄好。您如何看待上述评论中小提琴中的填充黑客？

【参考方案1】：

如上所述，您可以使用 padding 和 height 0，阅读这篇文章https://***.com/editing-helprticlehttp://www.mademyday.de/css-height-equals-width-with-pure-css.html，我也做了一个测试，希望是你想要的，看看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>