自动宽度列中的 Bootstrap 4 100vh 容器溢出

Question

我对引导程序还很陌生。我有一个包含三列的 bootstrap 4 页面。中间一列有一个容器，我在一个网格中排列了 4 个图像。在大屏幕上，我希望这个容器尽可能大，同时仍然适合屏幕（并保留内部图像的纵横比。我可以通过手动设置列宽（例如 col -lg-5)，但是根据屏幕的纵横比，图像容器要么没有填满整个高度，要么溢出超出视图。允许列自动宽度导致列占据 100% 宽度（图像很大）这不是我想要的。我可以使用max-height: 100vh; 将图像容器的高度设置为 100%，我认为这应该可以解决问题，但是该容器内的行不能缩放适合。而是垂直方向有溢出。

示例如下：

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-auto" style="background-color:red;">
            <h2>Column 1</h2>
        </div>
        <!-- I want the content in this column to take up 100% height on large screens, but 100% width on small screens (columns stack) -->
        <div class="col-auto" style="background-color:green;">
            <h2>Column 2</h2>
            <div id="img-container" class="container" style="max-height:100vh;">
                <div class="row">
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
                    </div>
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
                    </div>
                </div>
                <div class="row">
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
                    </div>
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto" style="background-color:blue;">
            <h2>Column 3</h2>
        </div>
    </div>
</div>

https://www.codeply.com/p/x1EiL25vhm

当前： 目前，图像溢出容器，我不知道如何让它们正确缩放。

期望的结果： 我希望图像容器始终以自动宽度占据 100% 的高度，直到侧面使用所有可用空间。在小屏幕上，三列应垂直堆叠，第 2 列将占据 100% 的宽度。

Answer 1

一种可能有效的技巧

1. 需要通过较小的屏幕尺寸
2. 一定宽度后不展开的原因是内部的<div id="img-container" class="container">使其变成<div id="img-container" class="container-fluid">会扩大更多
3. max-height:46vh 的原因是为 第 2 列 标题留出空间。也许动态计算会更好

代码

 <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<div class="container-fluid"  style="max-height:100vh;">
    <div class="row justify-content-center">
        <div class="col-auto" style="background-color:red;">
            <h2>Column 1</h2>
        </div>
        <!-- I want the content in this column to take up 100% height on large screens, but 100% width on small screens (columns stack) -->
        <div class="col-auto" style="background-color:green;" >
            <h2 class="header-2">Column 2</h2>
            <div id="img-container" class="container">
                <div class="row">
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png" style="max-height:46vh;">
                    </div>
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png" style="max-height:46vh;">
                    </div>
                </div>
                <div class="row">
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png" style="max-height:46vh;">
                    </div>
                    <div class="col p-0">
                        <img class="img-fluid" src="http://climate.met.psu.edu/ewall/test.png" style="max-height:46vh;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto" style="background-color:blue;">
            <h2>Column 3</h2>
        </div>
    </div>
</div>