Search code examples
javascripthtmlcssmosaic

A fixed height mosaic in HTML?

I've been trying to get a mosaic to appear at the top of my website that I'm building. I have about 50 pictures (I could get more if needed) I put inside of a mosaic that needs to have two key properties:

  1. The mosaic is always full width
  2. The mosaic is always using 70% height of the screen, 30% remaining are kept for the headline

Basically, regardless of the size of your browser, I always want the mosaic to take up 70% and be of a fixed height. See a diagram of what I'm referring to:

enter image description here

A few points important to mention:

  • In the example diagram above, I fully understand why I'm getting that result, the mosaic container is fixed to full width so that's why it either gets too big or shrinks to still fit all the width
  • I don't care if some images are shown or not shown, I'm just looking for that fixed height mosaic effect, if that means that on some screens some rows or columns of pictures will be missing, I don't mind. I also don't mind the size of the pictures, it still has to look like a mosaic, but I don't have a pre-set width/height.

How could I make such a mosaic work? I've been trying different approaches. I tried for example organizing my mosaic into rows of pictures (I called the bottom rows "disposableContainer1" and "disposableContainer2", and making those bottom rows disappear when the screen reaches a certain size:

document.addEventListener('DOMContentLoaded', function() {
    function adjustContainerVisibility() {
        var disposableContainer1 = document.getElementById('mosaic-row-4'); // Replace with actual ID
        var disposableContainer2 = document.getElementById('mosaic-row-3'); // Replace with actual ID

        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var thresholdForContainer1, thresholdForContainer2;

        if (windowWidth > 900) {
            // Width greater than 900px
            thresholdForContainer1 = 760;
            thresholdForContainer2 = 740;
        } else if (windowWidth > 800) {
            // Width between 801px and 900px
            thresholdForContainer1 = 750;
            thresholdForContainer2 = 730;
        } else {
            // Width 800px or less
            thresholdForContainer1 = 730;
            thresholdForContainer2 = 650;
        }

        // Debugging logs
        console.log('Window Height:', windowHeight, 'Window Width:', windowWidth);
        console.log('Thresholds:', thresholdForContainer1, thresholdForContainer2);

        // Check and apply visibility for disposableContainer1
        if (windowHeight < thresholdForContainer1) {
            if (disposableContainer1) disposableContainer1.style.display = 'none';
        } else {
            if (disposableContainer1) disposableContainer1.style.display = ''; // Reset to default
        }

        // Check and apply visibility for disposableContainer2
        if (windowHeight < thresholdForContainer2) {
            if (disposableContainer2) disposableContainer2.style.display = 'none';
        } else {
            if (disposableContainer2) disposableContainer2.style.display = ''; // Reset to default
        }
    }

    // Run on page load
    adjustContainerVisibility();

    // Add event listener for window resizing
    window.addEventListener('resize', adjustContainerVisibility);
});

But this is doesn't really do the trick, there are too many view combinations possible and I'm pretty sure there must be a smarter way to approach the problem.

My thoughts are:

  • Can I maybe make a larger, wider mosaic, and have parts of the mosaic not always visible, meaning the side images would only appear if needed to fill the 70% of screen height, otherwise they are beyond the limit of the screen and you can't see them? No idea if this makes sense
  • Can I do something like a masonry or grid type of thing, and make it so that the images within the mosaic always use all the space available? I don't really mind if the mosaic pictures are not all of the exact same height/width ratio.

Please let me know if you have some ideas, I'm sure there must be an efficient way to tackle this. As you can probably tell, I'm really new to web development...

Solution

  • Well, I think with chatGPT I was able to get a decent result, if someone's interested here is a way to make it work. Or maybe someone thinks there is a better way, I'm open to suggestions!

    <!DOCTYPE html>
<style>
.mosaic-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: calc(60vh / 4); /* Adjust the row height based on the number of rows you want */
  gap: 5px;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}
    
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    
.headline {
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000; /* Add a black border */
}
    
</style>
</head>
<body>

<div class="mosaic-container">
  <!-- Repeat the following block for each image -->
  <div class="mosaic-item">
    <img src="your-image-url.jpg" alt="Image description">
  </div>
  <!-- ... more images ... -->
</div>

<div class="headline">
  <h1>Some Headline</h1>
</div>

</body>
</html>