Adjust the height to match the shortest sibling child div height

Question

Adjust the height to match the shortest sibling child div height

In my layout, I have multiple rows with each row containing multiple columns. Within each column, there is a div and a paragraph - the div contains an image. My goal is to set the div with the class cover-bg to the lowest height of cover-bg in the same row. It's important that the calculated height of the cover-bg in one row should not be the same as the height in another row.

<div class="row">
    <div class="col-md-4">
        <div class="cover-bg"><img src="url"></div>
        <p>text here</p>
    </div>
    <div class="col-md-6">
        <div class="cover-bg"><img src="url"></div>
        <p>text here</p>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        <div class="cover-bg"><img src="url"></div>
        <p>text here</p>
    </div>
    <div class="col-md-4">
        <div class="cover-bg"><img src="url"></div>
        <p>text here</p>
    </div>
</div>

I've attempted to use jQuery to set the lowest height for all rows but it doesn't work as expected:

var minHeight = Math.min.apply(null, $('.cover-bg').map(function(){return $(this).height()}));
$('.cover-bg').height(minHeight);

I'm struggling with manipulating the siblings() and children() methods

The main issue is how to differentiate and set the height for each individual row

https://i.stack.imgur.com/tvu3M.jpg

javascript html jquery css

Answer 1

Answer №1

It is important to specify individual image heights for each row in order to avoid uniform height across all rows.

If you're finding the suggested jQuery solution confusing, here's a clear example using pure JavaScript instead.

The script calculates the minimum image height for each row and then assigns that value as a CSS variable to ensure proper styling of images within that row.

<!doctype html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    
    .row .cover-bg img:first-child {
      height: calc(var(--h) * 1px);
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-md-4">
      <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/500"></div>
      <p>
        weofijae
        <br/> weofjiawef awoeifj awoefij

      </p>
    </div>
    <div class="col-md-6">
      <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/1000"></div>
      <p>text here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/300"></div>
      <p>text here</p>
    </div>
    <div class="col-md-4">
      <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/200"></div>
      <p>text here</p>
    </div>
  </div>
  <script>
    function start() {
      const rows = document.querySelectorAll('.row');
      rows.forEach(row => {
        const imgs = row.querySelectorAll('img');
        let heights = [];
        imgs.forEach(img => {
          heights.push(img.height);
        });
        row.style.setProperty('--h', Math.min.apply(null, heights));
      });
    }
    window.onload = start;
  </script>
</body>

</html>

Please note that it's crucial to wait until the images are fully loaded before retrieving their natural heights.

To view the snippet correctly, run it full page to prevent wrapping issues with the rows.

Answer 2

It is important to specify individual image heights for each row in order to avoid uniform height across all rows.

If you're finding the suggested jQuery solution confusing, here's a clear example using pure JavaScript instead.

The script calculates the minimum image height for each row and then assigns that value as a CSS variable to ensure proper styling of images within that row.

<!doctype html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  <style>
    .row {
      margin-bottom: 20px;
    }
    
    .row .cover-bg img:first-child {
      height: calc(var(--h) * 1px);
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-md-4">
      <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/500"></div>
      <p>
        weofijae
        <br/> weofjiawef awoeifj awoefij

      </p>
    </div>
    <div class="col-md-6">
      <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/1000"></div>
      <p>text here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <div class="cover-bg"><img src="https://picsum.photos/id/1015/200/300"></div>
      <p>text here</p>
    </div>
    <div class="col-md-4">
      <div class="cover-bg"><img src="https://picsum.photos/id/1016/200/200"></div>
      <p>text here</p>
    </div>
  </div>
  <script>
    function start() {
      const rows = document.querySelectorAll('.row');
      rows.forEach(row => {
        const imgs = row.querySelectorAll('img');
        let heights = [];
        imgs.forEach(img => {
          heights.push(img.height);
        });
        row.style.setProperty('--h', Math.min.apply(null, heights));
      });
    }
    window.onload = start;
  </script>
</body>

</html>

Please note that it's crucial to wait until the images are fully loaded before retrieving their natural heights.

To view the snippet correctly, run it full page to prevent wrapping issues with the rows.

Answer 3

Answer №2

Give this a shot:

const smallestHeight = Math.min(...$.map($('.cover-bg'), (element) => ($(element).height())));
$('.cover-bg').height(smallestHeight);

Check out the demo here.

Answer 4

Give this a shot:

const smallestHeight = Math.min(...$.map($('.cover-bg'), (element) => ($(element).height())));
$('.cover-bg').height(smallestHeight);

Check out the demo here.

Adjust the height to match the shortest sibling child div height

Answer №1

Answer №2

Similar questions

Optimizing AngularJS performance with REST service caching

After running my CSS through the validator at http://www.css-validator.org/validator, I encountered a Parse Error. Any suggestions on how I can resolve this issue?

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

Achieving a seamless blend of parent background with child background: A step-by

Issues with using hooks in a remote module in Webpack 5 module federation

What is the best way to pause function execution until a user action is completed within a separate Modal?

Error: Unable to instantiate a THREE.Scene object in Three.js due to TypeError

Conceal the scrollbar track while displaying the scrollbar thumb

Using node.js to send a response with response.writeHead on the http module

Confirm the input validity using jQuery for radio buttons, checkboxes, and dropdown menus

Redirecting script upon successful connection detection

Maintain the state of the previous page in Vue to ensure continuity

Is it possible to determine whether a path leads to a directory or a file?

The jQuery Bootstrap Toggle is throwing an error: "Syntax error, unrecognized expression: #" within the Function.Sizzle.error

Is there a way to upload images using jQuery Ajax with a Grails webservice?

Accessing a text document from a specific folder

Getting the value of radio button groups in C# - A complete guide

Show the checked options retrieved from controller

Assign the physics settings to a variable within the A-frame

Include a name in the set_values function using Rvest