Horizontal and vertical photos in same row - html

Question

How set three photos like this:
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):
When i set middle photo width individually is worst because even i set 100vh width everything is breaking and it looks like this:
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">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</figure>
</div>
</div>
I dont know how to it and not to lose responsiveness.

Answer 1

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>