"Is there a way to remove the additional space beneath items in a display flex box layout created with

This section was designed using Bootstrap and displayed as flex. However, some items seem to have extra space:

My goal now is to remove the extra space underneath the items like this:

Smaller items will now be resized to match the larger items, eliminating the excessive space.

#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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjVERJvTumQW0nPEzvF6L/Z6nronJUOFUFpCjEUQouq2+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>

htmlcssbootstrap-4flexbox

Answer №1

To ensure the image height covers 100% of the container's height, adjust the image height property accordingly.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111657f677f61">[email protected]</a>/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>

If you wish to prevent images from stretching, utilize the object-fit property and specify the desired percentage within the container.

object-fit{}

and

object-position{}

For more information, check out: https://www.w3schools.com/css/css3_object-fit.asp and https://www.w3schools.com/cssref/css3_pr_object-position.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a loading screen with JQuery for an Ajax request

I want to implement a loading screen in my web application every time an ajax call is initiated using jQuery. Currently, I have different types of ajax calls such as $.getJSON, $.post, and $.ajaxFileupload, each with their own Success function that remov ...

htmlajaxjquery

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

Modify the original source data of an HTML table

I have written the following code: <table class="table table-hover"> <thead> <tr> <th>Status</th> <th>MPK</th> <th>Full Name</th> <th>Phone Number</th> <th>Proj ...

javascriptphphtmlcssjson

How can I achieve a stylish scrolling header similar to a Google Blog for my website?

Google's blog features a unique header design - as you scroll down, the gray bar in the header moves up until it locks at the top of the screen. While CSS's position:fixed can achieve a similar effect, Google seems to have used a combination of p ...

javascripthtmlcss

Execute the script repeatedly

(Since Stack snippet is temporarily down, I included a jsfiddle link): Visit this link for the code I've been struggling to get this script to work. Here's the simple Javascript code I have: $(document).ready(function() { showMessage(); s ...

javascriptjqueryhtmlcss

PHP file unable to access Bootstrap file

I have my bootstrap css file stored in the following directory: C:\Users\SCEA\Downloads\bootstrap-3.3.7\css When linking this css file to my php file, I used the absolute path: <link href="C:\Users\SCEA\Downl ...

csspath

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

phpjqueryhtmlmysql

The application of knockoutjs bindings is restricted to specific ids and cannot be used on any

In my project, I have multiple views where each one applies bindings to its own tag individually. Here is a snippet of the code: (Please note that some code has been omitted for brevity. For a more complete example, you can view the full fiddle here: http ...

javascripthtmlknockout.jsjsfiddleknockout-3.0

Enhancing divs with border using CSS Transforms

I'm currently in the process of constructing an isometric grid made up of cubes using CSS, but I've encountered a problem with outlines. Here's my desired outcome: cube design However, this is what I have managed to achieve so far: html cu ...

htmlcsstransformgradientisometric

Encountering a problem with the mouseup event

Hey there, I've got this code up and running smoothly but I'm looking to make a tweak. Is there a way to have the script halt on the mouse up event? Currently, it displays coordinates as you drag over an image, but I'd like it to only show ...

javascriptjqueryhtmlcsssvg

Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...

htmlcssasp.net

Struggling to style a nested table using CSS

Please take a look at this JSFiddle example for reference. I am currently working with tablesort and its associated CSS to achieve alternating row colors for the rows containing first and last names. Additionally, I want the rows within the sub-table disp ...

javascriptjqueryhtmlcss

"Consolidate numerous PHP Bootstrap alert boxes to create a single, unified

I have a form that displays errors within a Bootstrap alert, indicating if the username or email already exists. This can be seen in the picture below: https://i.sstatic.net/uSEpK.png My question is, how can I display these alerts in one single alert box ...

phpbootstrap-4alert

PHP integration with input forms

Is there a way to have multiple text fields that input data into various sections on a single webpage? If necessary, I could split the content over two pages. I've heard that this may involve using a PHP script, but I'm unsure of the steps to imp ...

phphtml

What is the best method for designing a slideshow with a background image on the body

I have been on a quest to find a simple background slideshow that fades images for the body of my website. Despite trying multiple Javascript options and CSS solutions, I have had no success. Someone suggested creating a DIV for the background, but I am ...

javascriptjqueryhtmlcss

There seems to be an issue with the functionality of ASP.NET MVC Bootstrap

My ASP.NET MVC project is using the latest version of Bootstrap (v4.1.3), however, I am experiencing issues with dropdown components not functioning properly. https://i.sstatic.net/by8Pd.png After some troubleshooting, I tried using @Style.Render(~/Conte ...

asp.netasp.net-mvc-5bootstrap-4

Clean coding techniques for toggling the visibility of elements in AngularJS

Hey everyone, I'm struggling with a common issue in my Angular projects: app.controller('indexController', function ($scope) { scope.hideWinkelContainer = true; scope.hideWinkelPaneel = true; scope.headerCart = false; scope. ...

javascriptangularjshtml

Struggling with incorporating a scroll loop effect and rotating div using the offsetTop property

Currently, I am working on a website that features a scroll loop effect, where reaching the bottom of the page seamlessly jumps back to the top, creating an infinite loop. My challenge lies in implementing an effect to rotate individual divs based on their ...

javascripthtmlcssoffset

Bootstrap 4 did not achieve the desired responsiveness for the image and h1 element

I am having trouble with my two Div elements, one for an image and one for a heading. I have set different font sizes based on different media queries in my CSS file. While it works when shrinking the width, the heading does not break into two lines. Addit ...

htmlcssbootstrap-4