Setting the parent's height to match one of its children

Question

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match in height, I could then use overflow hidden to hide the extra rollover images below and enable scrolling for viewing them.

Using a table layout doesn't solve the issue. Although using child div elements with hidden overflow seems like it should work, setting the height causes problems with image aspect ratios. The 3:2 aspect ratio of the images must be maintained.

The attempted javascript solutions fail to retrieve the image heights. Even fetching the child image height proved unsuccessful.

If anyone knows a magic trick to accomplish this, your advice would be greatly appreciated!

javascript html css

Answer 1

Answer №1

To implement a flexible layout, apply the display: flex property to the main container:

#content-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  display: flex;
}

#info-wrap {
  width: 100%;
  height: 325px;
  float: left;
  text-align: right;
  position: relative;
}

#main-content {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
}

#main-content>img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#thumbnails {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: scroll !important;
}

.thumbnail {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  height: auto;
}

.thumbnail:last-of-type {
  margin-bottom: 0;
}

.thumbnail>img {
  height: auto;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content-wrap">
  <div id="main-content" style="background-image: url('http://example.com/image.jpg')">
    <img src="http://example.com/thumbnail.jpg" id="image-sizer">
  </div>
  <div id="thumbnails">
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail1.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail2.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <script>
      // adjust overflow if less than 5 thumbnails
      var thumbs = document.getElementsByClassName('thumbnail');
      var thumbsContainer = document.getElementById('thumbnails');
      if (thumbs.length < 5) {
        thumbsContainer.style.overflow = 'hidden';
      }
    </script>
    <script>
      // ensure '#thumbnails' height does not exceed '#main-content'
      var mainContentHeight = document.getElementById('image-sizer').style.height;
      var thumbnailContainerHeight = document.getElementById('thumbnails').style.height;
      if (thumbnailContainerHeight > mainContentHeight) {
        document.getElementById('thumbnails').style.height = mainContentHeight;
      }
    </script>
  </div>
</div>

Answer 2

To implement a flexible layout, apply the display: flex property to the main container:

#content-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  display: flex;
}

#info-wrap {
  width: 100%;
  height: 325px;
  float: left;
  text-align: right;
  position: relative;
}

#main-content {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
}

#main-content>img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#thumbnails {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: scroll !important;
}

.thumbnail {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  height: auto;
}

.thumbnail:last-of-type {
  margin-bottom: 0;
}

.thumbnail>img {
  height: auto;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content-wrap">
  <div id="main-content" style="background-image: url('http://example.com/image.jpg')">
    <img src="http://example.com/thumbnail.jpg" id="image-sizer">
  </div>
  <div id="thumbnails">
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail1.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <div class="thumbnail" onmouseover="$('#main-content').css('background-image', $(this).css('background-image'));" style="background-image: url('http://example.com/thumbnail2.jpg')">
      <img src="http://example.com/thumbnail.jpg">
    </div>
    <script>
      // adjust overflow if less than 5 thumbnails
      var thumbs = document.getElementsByClassName('thumbnail');
      var thumbsContainer = document.getElementById('thumbnails');
      if (thumbs.length < 5) {
        thumbsContainer.style.overflow = 'hidden';
      }
    </script>
    <script>
      // ensure '#thumbnails' height does not exceed '#main-content'
      var mainContentHeight = document.getElementById('image-sizer').style.height;
      var thumbnailContainerHeight = document.getElementById('thumbnails').style.height;
      if (thumbnailContainerHeight > mainContentHeight) {
        document.getElementById('thumbnails').style.height = mainContentHeight;
      }
    </script>
  </div>
</div>

Setting the parent's height to match one of its children

Answer №1

Similar questions

"Implement a feature to recognize and handle various file extensions within an npm

Challenges in Ensuring Proper Alignment of Connection Line Between Boxes on Left and Right Sides within a React Component

Determine the size of v-flex in Vue / Vuetify

Ways to enhance background removal in OpenCV using two images

Avoid navigating to the subscribe block when the server sends a response in Angular

Preventing the upload of empty images in an angular application

When attempting to call a recursive method in Vue with a changing `this` object, an error is thrown: "RangeError: Maximum call stack size exceeded"

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

Initially, the 'display none' CSS command may not take effect the first time it is used

JavaScript and jQuery: The Power of Dynamic Arrays

Generate a visually dynamic representation of a live website page

Adjusting Iframe Dimensions Dynamically with Javascript based on Anchor Location

Utilize Meteor-tabular to effortlessly export data with convenient HTML5 export buttons

The login form is not being recognized by Chrome

Encountering error ORA-12514 when utilizing the node oracle-db npm package

javascript Incorrectly using location.reload will not refresh the page as intended

Showcase your skills in CSS, HTML, and Javascript

How can an Angular Component be created in the browser using the standard method?

Divergent Appearance of Input Field in Chrome versus Firefox

The HTML table inexplicably displays a random comma out of nowhere