Html - Sizing images with different heights to all be the same size using flexbox and CSS while avoiding overflowing

StewieL
July 14, 2023
190 views
0 votes
2 Answers

I’m having a problem where I need 4 images to be the same height (1 of them is taller than the remaining), but I can’t seem to get this specific image to resize appropriately without avoiding overflowing.

If I set a fixed height for my image div, I get overflowing content. (not from the actual image, but if I expand the webpage enough, the text div below it will have its border overflow out of the parent div.

When I look at devtools, the container for the image that I want resized is bigger than the others, causing this situation to happen.

If I use align-items: flex-start or align-items: stretch on the product div, that space will just move position and not align the images.

I then tried to set a fixed height for the actual image, but I still notice in devtools that there is an unnecessary space between the image and the text below.

Here’s the jsfiddle link to my code: https://jsfiddle.net/xy79o8g1/7/

In the link above, the image for "Neuro Tech" doesn’t have the same height as the others, leading to an uneven look and the text below it to also shift down.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>NexGen Labs</title>
    <link rel="shortcut icon" href="./resources/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./resources/css/reset.css">
    <link rel="stylesheet" href="./resources/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="navigation-container">
        <a href=""><img src="./resources/images/nexgen_labs_logo.png" alt="The logo of NexGen Labs"></a>
        <nav class="menus">
          <ul>
            <li>
              <a href="#">Our Mission</a>
              <a href="#products">Our Products</a>
              <a href="#">Meet Us</a>
            </li>
          </ul>
        </nav>
        <nav class="burger_menu">
          <a href=""><img src="./resources/images/burger_icon.png" alt=""></a>
        </nav>
      </div>
    </header>

    <!-- Main Content -->
    <main>
      <!-- Mission Section -->
      <section id="mission">
        <div class="content">
          <div class="text-container">
            <h2>
              Powering the Future, One Breakthrough at a Time!
            </h2>
          </div>
          <div class="button-container">
            <a href="#">Learn How</a>
          </div>
        </div>
      </section>

      <div class="divider"></div>

      <!-- Products Section -->
      <section id="products">
        <div class="content">
          <div class="product nano_sync">
              <div class="image-container">
                <img src=".//resources/images/nanosync.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">NanoSync</h4>
                <p class="product-description">Harnesses the power of nanotechnology to bring seamless and swift data sync to the palm of your hand.</p>
              </div>
          </div>
          <div class="product neuro_tech">
              <div class="image-container">
                <img src=".//resources/images/neuro_tech1.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">NeuroTech</h4>
                <p class="product-description">Cutting-edge wearable device that smoothly integrates advanced neurotechnology and A.I to enhance cognitive abilities and improve overall brain health.</p>
              </div>
          </div>
          <div class="product bio_elevate">
              <div class="image-container">
                <img src=".//resources/images/bio_elevate.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">BioElevate</h4>
                <p class="product-description">Utilizes the power of biotechnology to elevate human health and well-being.</p>
              </div>
          </div>
          <div class="product intelli_grow">
              <div class="image-container">
                <img src=".//resources/images/intelligrow.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">IntelliGrow</h4>
                <p class="product-description">An advanced, intelligent gardening system designed to maximize plant growh, revolutionizing the way plants are nurtured and cultivated.</p>
              </div>
          </div>
        </div>
      </section>

      <div class="divider"></div>

      <!-- Staff Section -->
      <section id="staff">
        <div class="content">
          <div class="introduction">
            <h2>Meet our Prominent Staff</h2>
          </div>
          <div class="staff-container">
            <div class=""></div>
            <div class="">

            </div>
            <div>

            </div>
          </div>
        </div>
      </section>      
    </main>

    <!-- Footer -->
    <footer>
      
    </footer>

  </body>
</html>

CSS:

/* Universal CSS Styles */

html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
}

main {
   position: relative;
   top: 7.4em;
   /* To offset text from the fixed header */
}

a {
   text-decoration: none;
}

.divider {
   height: 200px;
   background-color: aliceblue;
}

/* Header */

.navigation-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: linear-gradient(-70deg, #C45844 30%, rgba(240, 248, 255, 1) 30%);
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 2;
}

.menus ul {
   display: flex;
   padding: 2.5em;
}

.menus a {
   display: inline-block;
   font-family: "Orbitron", sans-serif;
   font-size: 1.2em;
   padding: 0.5em 1em;
   text-decoration: none;
   color: #CD853F;
   border: 0.0625em solid transparent;
   font-weight: 600;
}

.menus a:hover {
   color: black;
   border: 0.0625rem solid black;
   box-shadow: 0.0625em 0.0625em;
   padding: 0.5em 1em;
   font-size: 1.2em;
}

.menus a:active {
   position:relative;
   top: 0.125rem;
}

.burger_menu {
   display: none;
}

/* Main Content */

/* Mission Section */

#mission .content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   background-image: url("../images/mission_background.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 5%;
   background-attachment: fixed;
   padding-top: 1em;
   height: 50.375em;
   font-family: "Orbitron", serif;
}

#mission .text-container {
   width: 40%;
}

#mission .text-container h2 {
   width: 100%;
   padding: 1.3em 0.5em;
   text-align: center;
   font-size: 1.4em;
   border: 0.0625em solid #A9A9A9;
   color: #CD853F;
   font-weight: bold;
}

#mission .button-container {
   padding-bottom: 5rem;
   padding-left: 25rem;
}

#mission a {
   padding: 0.7rem 5rem;
   background: linear-gradient(to right bottom, #A4A5A7, #8A8A8B, #858A8B, #1B1C1D);
   border: 0.0625rem solid black;
   border-radius: 0.5rem;
   box-shadow: 0.0625rem 0.1875rem;
   font-family: "Orbitron", serif;
   font-size: 1.4rem;
   font-weight: bold;
   color: #CD853F;
}

#mission a:hover {
   background: transparent;
}

#mission a:active {
   position: relative;
   top: 0.1875rem;
   box-shadow: 0 0;
}

/* Products Section */

#products {
   background-color: aliceblue;
}

#products .content {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: stretch;
   padding: 3em;
   margin: 0 auto;
}

#products .product {
   display: flex;
   flex-flow: wrap;
   align-items: center;
   padding: 2em;
   width: 45%;
   text-align: center;
   margin: 0.625em auto;
}

#products .image-container {
   flex: 1 1 auto;
}

#products img {
   display: block;
   width: 100%;
}

#products .text-container {
   padding: 2em 0;
   width: 100%;
}

#products .nano_sync {
   background:linear-gradient(#080E16, #464E5F, #777F94, #D9B489);
}

#products .nano_sync .text-container{
   border: 0.0625em solid #AC9073;
   box-shadow: 0.125em 0.125em #AC9073;
}

#products .neuro_tech {
   background: linear-gradient(#D7B9BE, #2F1A54, #2B359D, #7C77C7, #9EB6EB);
}

#products .neuro_tech .text-container{
   border: 0.0625em solid #29349B;
   box-shadow: 0.125em 0.125em #29349B;
}

#products .bio_elevate {
   background:linear-gradient(#464367, #9993A4, #636F8E, #1C253B);
}

#products .bio_elevate .text-container {
   border: 0.0625em solid #AF9DB4;
   box-shadow: 0.125em 0.125em #AF9DB4;
}

#products .intelli_grow {
   background: linear-gradient(#0A2718, #619C65, #619C65, #91A184);
}

#products .intelli_grow .text-container {
   border: 0.0625em solid #042019;
   box-shadow: 0.125em 0.125em;
}

#products .product-name {
   font-size: 2em;
   font-weight: bold;
   padding: 0.5em 0;
}

#products .product-description {
   font-size: 1.5em;
   padding-top: 0.5em;
   line-height: 1.4;
}
/* Staff Section */



/* Footer */

Answers

Declare an aspect ratio for the images. The intrinsic size of the other three images are 1200×800, which is a ratio of 3-to-2.

#products img {
    aspect-ratio: 3 / 2;
}

My original answer was based on the external fiddle you provided. I didn’t realize that the CSS you showed in the question is different.

In addition to the above solution that answers your question, you are also concerned about a gap between the image container and the text container. This occurs when there is less text than other products in the row and is due to having flex on the parent "product" container (which stretches the height of these child containers to fill the product container.)

I am going to assume that you want the text containers to all be the same size and grow to fill the available space. You’ll need to change the flex-direction and flex-grow. If you don’t want the text container with its border to be wider than the image, you should also declare box-sizing: border-box.

#products .product {
    flex-direction: column;
    /* flex-flow: wrap; */
    /* align-items: center; */
}

#products .image-container {
    /* flex: 1 1 auto; */
}

#products .text-container {
   flex-grow: 1;
   box-sizing: border-box;
}

/* Universal CSS Styles */

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* Products Section */

#products {
   background-color: aliceblue;
}

#products .content {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: stretch;
   padding: 3em;
   margin: 0 auto;
}

#products .product {
   display: flex;
   flex-direction: column;
   /* flex-flow: wrap; */
   /* align-items: center; */
   padding: 2em;
   width: 45%;
   text-align: center;
   margin: 0.625em auto;
}

#products .image-container {
   /* flex: 1 1 auto; */
}

#products img {
   display: block;
   width: 100%;
   aspect-ratio: 3 / 2;
}

#products .text-container {
   padding: 2em 0;
   width: 100%;
   flex-grow: 1;
   box-sizing: border-box;
}

#products .nano_sync {
   background:linear-gradient(#080E16, #464E5F, #777F94, #D9B489);
}

#products .nano_sync .text-container{
   border: 0.0625em solid #AC9073;
   box-shadow: 0.125em 0.125em #AC9073;
}

#products .neuro_tech {
   background: linear-gradient(#D7B9BE, #2F1A54, #2B359D, #7C77C7, #9EB6EB);
}

#products .neuro_tech .text-container{
   border: 0.0625em solid #29349B;
   box-shadow: 0.125em 0.125em #29349B;
}

#products .bio_elevate {
   background:linear-gradient(#464367, #9993A4, #636F8E, #1C253B);
}

#products .bio_elevate .text-container {
   border: 0.0625em solid #AF9DB4;
   box-shadow: 0.125em 0.125em #AF9DB4;
}

#products .intelli_grow {
   background: linear-gradient(#0A2718, #619C65, #619C65, #91A184);
}

#products .intelli_grow .text-container {
   border: 0.0625em solid #042019;
   box-shadow: 0.125em 0.125em;
}

#products .product-name {
   font-size: 2em;
   font-weight: bold;
   padding: 0.5em 0;
}

#products .product-description {
   font-size: 1.5em;
   padding-top: 0.5em;
   line-height: 1.4;
}

<!-- Products Section -->
<section id="products">
  <div class="content">
    <div class="product nano_sync">
      <div class="image-container">
        <img src="https://i.postimg.cc/G2L1742r/nanosync.jpg" alt="">
      </div>
      <div class="text-container">
        <h4 class="product-name">NanoSync</h4>
        <p class="product-description">Harnesses the power of nanotechnology to bring seamless and swift data sync to the palm of your hand.</p>
      </div>
    </div>
    <div class="product neuro_tech">
      <div class="image-container">
        <img src="https://i.postimg.cc/bvHh9xq3/neuro-tech1.jpg" alt="">
      </div>
      <div class="text-container">
        <h4 class="product-name">NeuroTech</h4>
        <p class="product-description">Cutting-edge wearable device that smoothly integrates advanced neurotechnology and A.I to enhance cognitive abilities and improve overall brain health.</p>
      </div>
    </div>
    <div class="product bio_elevate">
      <div class="image-container">
        <img src="https://i.postimg.cc/GmDrH0V0/bio-elevate.jpg" alt="">
      </div>
      <div class="text-container">
        <h4 class="product-name">BioElevate</h4>
        <p class="product-description">Utilizes the power of biotechnology to elevate human health and well-being.</p>
      </div>
    </div>
    <div class="product intelli_grow">
      <div class="image-container">
        <img src="https://i.postimg.cc/50sWZfYz/intelligrow.jpg" alt="">
      </div>
      <div class="text-container">
        <h4 class="product-name">IntelliGrow</h4>
        <p class="product-description">An advanced, intelligent gardening system designed to maximize plant growh, revolutionizing the way plants are nurtured and cultivated.</p>
      </div>
    </div>
  </div>
</section>

You could use aspect ratio to detirmine the size of the container of the image and then set the image as position absolute. see JSFiddle here.

The reason I set the aspect ratio on the container and then the image as position absolute with object-fit: cover; is because this way we don’t actually mess with the proportions of the image. The image will retain it’s own aspect-ratio but will be made to cover the aspect-ratio of the container by cropping the edges to fit.

I altered #products .image-container and #products .product img

#products .image-container {
    overflow: hidden;
    aspect-ratio:5/3; /*This will set the aspect-ratio on the container to be the same for all boxes.*/
    position: relative;
    width: 100%;
    height: auto;
}

#products .product img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /*This decides how the image should be resized in the container*/
    object-position: center center; /*Specify the alignment of the image*/
}

HTML Snippet

/* Universal CSS Styles */

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

main {
    position: relative;
    top: 7.4em;
    /* To offset text from the fixed header */
}

a {
    text-decoration: none;
}

li {
  list-style: none;
}

.center {
    text-align: center;
}

/* Header */

.navigation-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:aliceblue;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2;
}

.menus ul {
    display: flex;
    padding: 2.5em;
}

.menus a {
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #CD853F;
    border: 0.0625em none transparent;
}

.menus a:hover {
    color: black;
    border: 0.0625rem solid black;
    box-shadow: 0.0625rem 0.0625rem;
    padding: 0.5em 1em;
    font-size: 1.2em;
}

.menus a:active {
    position:relative;
    top: 0.125rem;
}

.burger_menu {
    display: none;
}

/* Main Content */

/* Mission Section */

#mission .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-image: url("https://i.postimg.cc/k4XyhCPL/mission-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 5%;
    background-attachment: fixed;
    padding-top: 1em;
    height: 34.25rem;
    font-family: "Orbitron", serif;
}

#mission .text-container h2 {
    width: 100%;
    padding: 1.3em 0.5em;
    text-align: center;
    font-size: 1.4em;
    border: 0.0625em solid #A9A9A9;
    color: #CD853F;
    font-weight: bold;
}

#mission .button-container {
    padding-bottom: 2.5rem;
}

#mission a {
    padding: 0.7rem 5rem;
    background-color: aliceblue;
    border: 0.0625rem solid black;
    border-radius: 0.5rem;
    box-shadow: 0.0625rem 0.1875rem;
    font-family: "Orbitron", serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #CD853F;
}

#mission a:hover {
    background-color: transparent;
}

#mission a:active {
    position: relative;
    top: 0.1875rem;
    box-shadow: 0 0;
}

/* Products Section */

#products {
    background-color: aliceblue;
}

#products .content {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: stretch;
    padding: 2em;
    margin: 0 auto;
}

#products .product {
    background-color: rgba(255, 255, 250, 0.7);
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 2em;
    width: 45%;
    border: 1px solid red;
    margin-top: 1.5625rem;
    text-align: center;
}

    #products .image-container {
        overflow: hidden;
        aspect-ratio:5/3; /*This will set the aspect-ratio on the container to be the same for all boxes.*/
        position: relative;
        width: 100%;
        height: auto;
    }
    
    #products .product img {
        display: block;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /*This decides how the image should be resized in the container*/
        object-position: center center; /*Specify the alignment of the image*/
    }

#products .product-name {
    font-size: 2em;
    font-weight: bold;
    padding: 1em 0;
}

#products .product-description {
    padding-bottom: 2em;
}

/* Staff Section */



/* Footer */

<!DOCTYPE html>

<html>
  <head>
    <title>NexGen Labs</title>
    <link rel="shortcut icon" href="./resources/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./resources/css/reset.css">
    <link rel="stylesheet" href="./resources/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  </head>

  <body>
    <!-- Header -->
    <header>
      <div class="navigation-container">
        <a href=""><img src="https://i.postimg.cc/8CVGvKg7/nexgen-labs-logo.png" alt="The logo of NexGen Labs"></a>
        <nav class="menus">
          <ul>
            <li>
              <a href="#">Our Mission</a>
              <a href="#">Our Products</a>
              <a href="#">Meet Us</a>
            </li>
          </ul>
        </nav>
        <nav class="burger_menu">
          <a href=""><img src="./resources/images/burger_icon.png" alt=""></a>
        </nav>
      </div>
    </header>

    <!-- Main Content -->
    <main>
      <!-- Mission Section -->
      <section id="mission">
        <div class="content">
          <div class="text-container">
            <h2>
              Powering the Future, One Breakthrough at a Time!
            </h2>
          </div>
          <div class="button-container">
            <a href="#">Learn How</a>
          </div>
        </div>
      </section>

      <!-- Products Section -->
      <section id="products">
        <div class="content">
          <div class="product nano_sync">
              <div class="image-container">
                <img src="https://i.postimg.cc/G2L1742r/nanosync.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">NanoSync</h4>
                <p class="product-description">Harnesses the power of nanotechnology to bring seamless and swift data sync to the palm of your hand.</p>
              </div>
          </div>
          <div class="product neuro_tech">
              <div class="image-container">
                <img src="https://i.postimg.cc/bvHh9xq3/neuro-tech1.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">NeuroTech</h4>
                <p class="product-description">Cutting-edge wearable device that smoothly integrates advanced neurotechnology and A.I to enhance cognitive abilities and improve overall brain health.</p>
              </div>
          </div>
          <div class="product bio_elevate">
              <div class="image-container">
                <img src="https://i.postimg.cc/GmDrH0V0/bio-elevate.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">BioElevate</h4>
                <p class="product-description">Utilizes the power of biotechnology to elevate human health and well-being.</p>
              </div>
          </div>
          <div class="product intelli_grow">
              <div class="image-container">
                <img src="https://i.postimg.cc/50sWZfYz/intelligrow.jpg" alt="">
              </div>
              <div class="text-container">
                <h4 class="product-name">IntelliGrow</h4>
                <p class="product-description">An advanced, intelligent gardening system designed to maximize plant growh, revolutionizing the way plants are nurtured and cultivated.</p>
              </div>
          </div>
        </div>
      </section>
      <!-- Staff Section -->
      <section id="staff"></section>      
    </main>

    <!-- Footer -->
    <footer>
      
    </footer>

  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Sizing images with different heights to all be the same size using flexbox and CSS while avoiding overflowing

Answers