同一行中的水平和垂直照片

Question

如何设置三张这样的照片：

仅当我将 css 宽度设置为 100vh 时，照片才会覆盖所有宽度，但中间的照片不成比例（黑框显示我希望它的外观）：

当我单独设置中间照片宽度时是最糟糕的，因为即使我设置了 100vh 宽度，一切都被打破了，它看起来像这样：

这里是 HTML 代码：

<main>

<div class="container-fluid">

    <div class="row justify-content-sm-center">

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>

            </figure>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a>

            </figure>

        </div>

        <div class="col-lg-4 col-md-6 col-sm-12">

            <figure class="description">

                <a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>

            </figure>

        </div>

</div>

我不知道该怎么做，也不要失去响应能力。

Answer 1

您可以在 Bootstrap Grid System 中使用Setting one column width。

这是文档：https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

这将是代码（将列值替换为图像或背景图像）：

<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>