同一行的水平和垂直照片

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 网格系统中使用 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>

同一行的水平和垂直照片

Horizontal and vertical photos in same row

html

css

photo-gallery

bootstrap-5