htmlcssbootstrap-5photo-gallery

Horizontal and vertical photos in same row

How set three photos like this: enter image description here

The photos cover all width only if i set in css width: 100vh for all, but then middle photo is disproportionate (black frames show how i would like it to look like): enter image description here

When i set middle photo width individually is worst because even i set 100vh width everything is breaking and it looks like this: enter image description here

Here is HTMl code:

<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>

I dont know how to it and not to lose responsiveness.

Solution

  • You can use the Setting one column width in the Bootstrap Grid System.

    Here's the documentation: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

    This would be the code (Replace the column values with images or background-images):

    <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>