HTML - 响应式照片库覆盖 100% 屏幕

Question

我如何设置 div 所有可用的照片 space （现在 div .row 有很大的边距）并为所有行中的所有照片设置一个高度（我有垂直和水平照片）并保持响应能力？行中的边距始终相同。 Ofc中间的照片会更宽以保持比例。

HTML:

<main>

<div class="container">

    <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/1.jpg" class="img-fluid img home-photos"></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/2.jpg" class="img-fluid img home-photos"></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/3.jpg" class="img-fluid img home-photos"></a>

            </figure>

        </div>

    </div>

</div>

Answer 1

如果我正确理解问题，这个 CSS 应该可以。

  .row {
  display: flex;
  justify-content: space-around;
}

.img {
  height: 100vh;
  width: 45vh; //play with this to get the effect you desire.  You may need to target the middle picture individually. 
}