-1

How set the same height and keep proportions?

When i set height for example 70vh i have what i want but images are not proportional: enter image description here

When i set height: auto; images are resposive and proportional but have different height: enter image description here

Can i combine both and have same height and keep proportions?

HTML:

<main>

<div class="container-fluid">

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

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

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

        <div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">

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

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

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

</div>

CSS:

 .first-row div img
    {
        max-width: 100%;
        height: auto;
    }
BlvckCodeGuy
  • 35
  • 5

2 Answers2

0

Try to use image as background image on div element:

HTML:

<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>

CSS:

.bg-cover-center {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

And don't forget to set width or min-width otherwise div width will be 0 because its don't have content

Владимир Spirit
  • 1
  • 2
0

display: flex to the parent div then assign a height and put the width: auto for the images.

Brandon
  • 374
  • 2
  • 15