0

i design this section by bootstarp and display is flex. but i under some item have many extra space:

enter image description here

Now I want delete Extra space under items like this:

enter image description here

Smaller items become the same size as larger items, so a lot of extra space is created.

#portfolid {
  padding: 60px 0;
}

#portfolid .portfolid-item {
  margin-bottom: 30px;
  height: 100%;
  align-items: center;
}

#portfolid .portfolid-item .portfolid-overlay {
  position: absolute;
  bottom: -25px;
  width: 90%;
  height: 85px;
  right: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, .9);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out;
}

#portfolid .portfolid-item:hover .portfolid-overlay {
  bottom: 15px;
  opacity: 1;
  visibility: visible;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolid</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

<body>
  <!-- Portfolid -->
  <section id="portfolid">
    <div class="container">
      <div class="row">
        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
          <img src="https://s4.uupload.ir/files/portfolio-1_j0pd.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
          <img src="https://s4.uupload.ir/files/portfolio-2_4m83.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
          <img src="https://s4.uupload.ir/files/portfolio-3_xdlg.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
          <img src="https://s4.uupload.ir/files/portfolio-4_4ogv.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
          <img src="https://s4.uupload.ir/files/portfolio-5_l6n.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
          <img src="https://s4.uupload.ir/files/portfolio-6_694s.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
          <img src="https://s4.uupload.ir/files/portfolio-7_oxqo.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
          <img src="https://s4.uupload.ir/files/portfolio-8_xn4.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>

        <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
          <img src="https://s4.uupload.ir/files/portfolio-9_xqw3.jpg" alt="" style="width: 100%;">
          <div class="portfolid-overlay">
            <div class="row">
              <!-- content -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</body>

</html>
Nimantha
  • 6,405
  • 6
  • 28
  • 69
SOH3IL
  • 1
  • 2
  • In a nutshell, you should: instead of img elements, put the images in the background-image property of their parent div. That div should also have background-size: contain and background-repeat: no-repeat. Also, all the divs should be square-like, same width and height. Otherwise if you want to preserve their height, you can fulfill their background. I don't see other solution. – Dalibor Jul 18 '21 at 14:59

1 Answers1

1

you can do this by making the image height to cover 100% height of the container

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolid</title>
  <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
integrity="sha384- 
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
crossorigin="anonymous">

</head>

<body>
  <!-- Portfolid -->
  <section id="portfolid">
    <div class="container">
  <div class="row">
    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
      <img src="https://s4.uupload.ir/files/portfolio-1_j0pd.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
      <img src="https://s4.uupload.ir/files/portfolio-2_4m83.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
      <img src="https://s4.uupload.ir/files/portfolio-3_xdlg.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
      <img src="https://s4.uupload.ir/files/portfolio-4_4ogv.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
      <img src="https://s4.uupload.ir/files/portfolio-5_l6n.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
      <img src="https://s4.uupload.ir/files/portfolio-6_694s.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
      <img src="https://s4.uupload.ir/files/portfolio-7_oxqo.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
      <img src="https://s4.uupload.ir/files/portfolio-8_xn4.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>

    <div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
      <img src="https://s4.uupload.ir/files/portfolio-9_xqw3.jpg" alt="" style="width: 100%; height: 100%;;">
      <div class="portfolid-overlay">
        <div class="row">
          <!-- content -->
        </div>
      </div>
    </div>
  </div>
</div>
  </section>

  </body>

  </html>

in addition if you don't want your images to be stretched you use the obect-fit property and choose the percentage of you want to show in that container

object-fit{}

and

object-position{}

for reference visit: https://www.w3schools.com/css/css3_object-fit.asp and https://www.w3schools.com/cssref/css3_pr_object-position.asp

Anonymous Coder
  • 556
  • 2
  • 16