maintaining consistent item heights within a single column

I am looking to create a gallery where the thumbnails have equal height along the main column, even though the images are different heights. I attempted to wrap each picture in a <div> and set the height on them, but I did not achieve the desired result. Any suggestions?

/* PLEASE see the snippet in Full size */


.gallery .gal-ver .gal-ver-border {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
}
.gallery .gal-ver img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    padding: 5px;
}
.gallery .imgWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 15px;
}
.gallery .mainimg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 10px;
}
<!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="14767b7b60676066756454213a263a24397671607525">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>[product-name]</title>
</head>
<body>


<div class="gallery d-flex">
   <div class="gal-ver">
    <div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
   </div>                      
   <div class="col-md-12 col-lg-9 imgWrap">
     <img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
   </div>
  </div>

htmlcss

Answer №1

To ensure consistency in the height of all gallery items, it is recommended to specify a fixed height for the parent div .gal-ver-border.

If you find that the images' aspect ratio gets distorted after setting the fixed height, simply include object-fit: contain; in the image's style.

Add the following CSS to achieve the desired result:

.gallery .gal-ver .gal-ver-border {
  height: 290px; /* or any other desired value */
}

.gallery .gal-ver .gal-ver-border img {
  object-fit: contain;
}

Answer №2

Here is a solution for you:

.image-container .img-wrap .img-border {
   border: 2px dashed #333;
   border-radius: 15px;
   display: grid;
   grid-template-columns: auto auto;
   justify-content: space-around;
}

Answer №3

Utilizing this layout, you have the flexibility to adjust the size of the main image using flex-basis while setting a height of 20% for the smaller images. I included a calc(20% - 4px) explanation to account for the margin and border around the small images. Additionally, I incorporated a :not(:first-of-type) selector to eliminate top margin for the first image.

.gallery .gal-ver .gal-ver-border {
    border: 1px solid #707070;
    border-radius: 10px;
    display: flex;
    margin-bottom: 5px;
}

.gallery .gal-ver .gal-ver-border:not(:first-of-type) {
    margin-top: 5px;
 }

.gal-ver > * {
    height: calc(20% - 4px);
 }

.gallery .gal-ver img {
    object-fit: contain;
    width: 100%;
    border-radius: 10px;
    display: block;
    padding: 5px;
}
.gallery .imgWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 15px;
    margin-left: 5px;
    flex: 0 0 80%;
}
.gallery .mainimg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 10px;
}
<!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="b8dad7d7cccbcccad9c8f88d968a968895daddccd989">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>[product-name]</title>
</head>
<body>


<div class="gallery d-flex">
   <div class="gal-ver">
    <div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
   </div>                      
   <div class="col-md-12 col-lg-9 imgWrap">
     <img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
   </div>
  </div>

Answer №4

<!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>Creating Equal Heights in Column - Query on May 15th, 2022</title>
  <style>
    
    .gallery {
      display: inline-flex;
      /* background-color: lightblue; */
      padding: 10px;
    }
    
    img:not(.display-img) {
      height: 50px;
      width: 50px;
      margin: 5px;
      padding: 5px;
      border: 1px solid hsl(0, 0%, 65%);
    }
    
    .display-div {
      border: 1px solid hsl(0, 0%, 65%);
      padding: 10px 20px;
      margin: 5px 10px;
    }
    
    .display-img {
      height: 200px;
      width: 200px;
      margin-top: 22%;
    }
    
    img,
    .display-div {
      border-radius: 5px;
    }
  </style>



</head>

<body>

  <div class="gallery">
    <div class="display-div">
      <img class="display-img" src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
    </div>
    <di vclass="">
      <div class=""><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
      <div class=""><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
      <div class=""><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
      <div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
      <div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
    </div>
  </div>

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

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

htmlcssiphone

Customize the CSS styling of third-party components in different pages using NextJS

When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...

cssreactjsnext.jsfullcalendar

What is the best way to extract HTML elements during the process of web scraping?

Currently, I am attempting to extract data from a webpage using Python. Here is my existing Python code... from lxml import html import requests if __name__ == "__main__": page = requests.get('https://www.example.com/example') tree = ht ...

pythonhtmlweb-scraping

Is it possible to create a see-through Bootstrap Alert Box without altering the text within it?

I'm attempting to create a semi-transparent alert box that preserves the visibility of the text inside it, but I am unsure of how to achieve this effect. Here is an excerpt from my CSS file: .cookiealert { display:inline-block; width: 70%; ...

cssbootstrap-4

Python Application Engine - Streamlining Responses from HTML Control Arrays

In my attempt to use App Engine (Python), I am facing a challenge in sending POST values from a variable array of select controls within an HTML form. Each select control is associated with a text describing what the user is rating. For instance, let&apos ...

pythonhtmlgoogle-app-enginepost

Button with Circular Design by Tailwind

Is there a way to place a circle inside a button with text positioned to the right of it without overlapping in a centered manner? Take a look at this playground HERE <button class="btn btn-change"> <span class="w-5 h-5 bg-red-5 ...

csstailwind-css

Having trouble with AngularJS ngRepeat not functioning properly?

Currently, I am utilizing AngularJs to showcase Google maps with markers. Upon clicking a marker, I am aiming to display the details of the clicked marker. Here is the content of my Controller.js: function createMarker(latitude,longitude,name,address,lo ...

javascripthtmlangularjs

Form malfunctioning when utilizing dual submit buttons

I have created a form in my JSP page for a web application with text fields and two submit buttons: "send" and "search". I want the form to perform different actions based on which button is pressed, but currently both buttons trigger the same action. Can ...

javascripthtmljsp

Unveiling the Solution: Deactivating CSS Style Hints in VS Code!

click here to view the image Can anyone guide me on how to turn off the style hint feature in VS Code while working with CSS? ...

htmlcssvisual-studio-code

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

For my Sharepoint 2010 application, I have been utilizing jQuery to handle most events on the client-side. However, when it comes to saving data to the Sharepoint list and generating a PDF file with that data, I need to switch to server-side processing usi ...

c#jqueryhtmlsharepoint-2010

Bespoke design for your ReactJS project

As I delve into my personal project with React generated by create-react-app, I find myself faced with a style guide filled with specifications for font-family, primary colors, stylish buttons, icons, and various custom components such as check-boxes and i ...

cssreactjsthemes

What is the reason for the lack of an applied CSS selector?

.colored p{ color: red; } article > .colored{ color:powderblue; } .blue{ color: white; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initi ...

javascripthtmlcss

The Highcharts Range Selector feature may encounter issues when used with multiple series

Currently, I am facing an issue with my highchart/highstock where I retrieve data from a PHP file. The problem arises when I attempt to use multiple series as the RangeSelector Buttons cease to function properly. For instance, in the example provided, the ...

javascriptphphtmlchartshighcharts

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

javascripthtmlcssangularjs

Sliding a div out from the right using jQuery

I am attempting to create a sliding effect from the right on a div using jQuery. I have managed to accomplish part of it, but not exactly as I would like. You can view my code on this JSFiddle. While the div slides out smoothly, the text inside wraps when ...

jquerycss

Sorry, but we couldn't find the page you're looking for. It seems that there are no sales that match the

Every time I run my Python code, it throws the error message below: Page not found (404) Request Method: GET Request URL: Raised by: geo_gas.views.edit_sale No Sales matches the given query. class Sales(models.Model): gas_qty = model ...

pythonhtmldjango

Retrieve data from the database and dynamically populate a dropdown list based on the selection made in another dropdown menu

I created a JSP page where the values of the second dropdown should change based on the selection in the first dropdown. Both dropdown values are retrieved from the database. The values for the second dropdown are fetched using the foreign key from the t ...

javascripthtmlajaxservlets

What steps can I take to ensure this grid adjusts seamlessly across different screen sizes

I'm struggling to create a responsive grid layout and I need some guidance. How can I make this grid responsive? Specifically, I want it to switch to a one-column layout when the browser size is reduced. I've attempted using media queries and var ...

htmlcssresponsive-designcss-grid

Incorporating text box input into a data table

When I click the "add game" button, I want the value of the input named "game-name" to appear in the "Name of the game" column of a table. Additionally, I am experiencing issues with the delete button functionality. Below is the code snippet I am working ...

javascriptjqueryhtml

"Flask: Dealing with 404 Error when Loading CSS Files

Ensuring that elements are styled properly on my Flask-based website has been a challenge as the css files seem to never load correctly. A peculiar issue arises where the css files will load successfully when initially called from layout.html using the pa ...

pythonhtmlcssflask