Developed a visually stunning image gallery using both Bootstrap Grid and Flexbox, though there are a few images that do not completely fill the flex container

I'm currently exploring web development and experimenting with creating a responsive image gallery using Bootstrap Grid and flexbox. However, I've encountered an issue where some of the images are not filling the entire height of the flex container.

Here's how it looks right now

* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2cdd2cf">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <!-- Grid layout goes here -->
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba4bba6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

What steps should I take to ensure that all images have the same height and fill the flex container completely?

htmlcssflexboxcss-gridbootstrap-5

Answer №1

Include height:100% for the a tag

.tile a{
 height:100%;
}


* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tile a{
 height:100%;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb2adb0">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dcc3de">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Answer №2

To achieve the desired layout, you should include the following CSS code:

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile .picture {
  height: inherit;
  width: inherit;
}

.tile img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  transition: all 0.2s;
}

.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}

 
<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      // Add your HTML code here according to the provided CSS
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Answer №3

You have the option to set the height to 100% by using the 'a' tag within the parent element titled 'title'.

* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  position: relative;
}

body {
  overflow-y: auto;
  min-height: 100vh;
}

.container {
  margin-top: 20px;
}

.tile , a{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}
.tile img:hover {
  filter: brightness(50%);
  transform: scale(1.1);
}
<!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" />
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d928d90">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                class="img-one"
                src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
                alt=""
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/07/02/22/20/bouquet-142876_960_720.jpg"
                alt=""
                class="img-two"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_960_720.jpg"
                alt=""
                class="img-three"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg"
                alt=""
                class="img-four"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/01/22/19/44/flower-field-250016_960_720.jpg"
                alt=""
                class="img-five"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_960_720.jpg"
                alt=""
                class="img-six"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"
                alt=""
                class="img-seven"
              />
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-4">
          <div class="tile">
            <a class="picture" href="#">
              <img
                src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg"
                alt=""
                class="img-eight"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607f607d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

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

What is the best way to make JavaScript display the strings in an array as bullet points on different lines?

We were assigned a task in our computer science class to analyze and extend a piece of code provided to us. Here is the given code snippet: <!DOCTYPE html> <html> <head> <title>Example Website</title> </head> <body& ...

javascripthtml

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

cssreactjsmaterial-ui

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascriptphphtml

Utilize jQuery to showcase elements in a dropdown menu

Hey everyone, I'm working on an ASP.NET MVC4 project and I'm using a jQuery script on the edit page. However, I am encountering an issue with displaying elements on the page. Here is the initial HTML markup of my dropdown before any changes: & ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

What steps can I take to ensure that my email signature is optimized for mobile devices and responsive

I need assistance with formatting my email signature, which currently includes a simple table with a logo in one column and contact details in the other. I want to modify it to be responsive so that on smaller devices, the logo appears above the contact d ...

htmlemailgmailresponsive

Seeking assistance in developing a dynamic footer complete with a gallery of images

Attempting to create a footer packed with images but struggling to ensure it looks good on both PCs and mobile devices. The goal is to align the bronze sponsor kitten to the left, and supporter kittens to the right, while keeping the footer at a reasonabl ...

htmlcss

CSS query: How to eliminate the extra space at the top of a webpage?

How can I eliminate the gray area visible here: The padding in style.css is currently set to: padding: 0; I have attempted to modify this by changing the following: #page { margin-top: 0; } I have tried variations such as: #page { margin-top: 5px !im ...

cssmargin

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

htmlcsscss-tables

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

htmlcss

Integrating an HTML resume, complete with its CSS style sheet, into a different HTML page

Looking for tips on seamlessly integrating one HTML page within another? I'm in the process of customizing my personal website using a template, but I recently came across a free resume HTML code that I'd like to incorporate. However, when I atte ...

csshtml

having trouble transferring the password field in PHP to phpMyAdmin

My HTML form collects the user's first name, last name, username, and password. I am trying to upload this data to my local phpMyAdmin, but I'm facing an issue with storing the password in the database. Below is my HTML code: <input type="te ...

javascriptphpcsshtmlphpmyadmin

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...

javascriptcssreactjsreact-hooksmaterial-ui

What is the best way to retrieve the index of the chosen option from a select element in Angular when

My Angular application includes a simple <select> element using Material design: <mat-form-field> <mat-label>Type</mat-label> <mat-select placeholder="Type" formControlName="type" name="type" id="name"> <mat-option ...

htmlangularformsangular-material

Steps to show the default value in a text box and add additional input after clicking a button

Hello there! I need help with my HTML project again. In my script, I have a button command to display input values in boxes. I want these input boxes to show default values of Model, IMEI, and Serial when no input is detected upon button click. And when ...

html

What is the best way to make a vertical line using the CSS code provided in the link?

Check out this cool horizontal line design I found on stackoverflow: Click here for CSS code to create the line I really like the look of the line. Here's how I implemented it on my website: hr.fancy-line { border: 0; height: 5px; } hr ...

javascriptjqueryhtmlcss

yet another dilemma with CSS height set to 100%

UPDATE: I believe there was an excess of information. Let me simplify my question: How can I adjust the height of #middle to be 100% of the remaining space in the example below: <body> <div id="big"> <div id="header"></div ...

htmlcssheight

Navigating between various arrays

I'm struggling to create a basic slideshow using the JavaScript code below, but it doesn't seem to be functioning correctly. I have meticulously checked for any errors in spelling and made sure all elements are correctly linked to my HTML. JavaS ...

javascripthtmlarraysslideshow