CODEWITHSUNDEEP
htmlcsstwitter-bootstrapimage
nwde
nwde

Reputation: 47

Different sizes Images in a 100%-width-row

i am trying to put several images (five) next to each other in one row. The row should have the width of a 100%. It is important that the images all have the same height e.g.! Is there a way to manage this? I tried several code, e.g. a masonry, but it does not help me with the height of the images.

This is what I am trying to achieve

Thank you

(I am using Bootstrap if that's any help.)

Upvotes: 1

Views: 835

Answers (2)

Run_Script
Run_Script

Reputation: 2548

Edited, new answer.

The code below should do the job.

Note that I have inserted comments between all the img tags in the html, this is to make sure that there is no spacing between the images and is therefore important for the code to work!

Also note that if you change the class of the div which contains the images, you will have to change the query selector in the javascript to match this.

Final note: the script is very laggy here in the code snippet. I tried it as an actual webpage and it was not laggy at all, so maybe try that too!

var repeat = true;

window.addEventListener("load", resizeImages);
window.addEventListener("resize", resizeImages);

function resizeImages() {

  var i;

  var images = document.querySelectorAll("div.row img");

  var heights = [];
  var widths = [];

  for (i = 0; i < images.length; i++) {
    heights.push(images[i].offsetHeight);
    widths.push(images[i].offsetWidth);
  }

  var numerator = document.body.clientWidth;

  for (i = 0; i < heights.length; i++) {
    numerator *= heights[i];
  }

  var denominator = 0;

  for (i = 0; i < widths.length; i++) {

    var thisItem = widths[i];

    for (i2 = 0; i2 < heights.length; i2++) {

      if (i != i2) {
        thisItem *= heights[i2];
      }
    }

    denominator += thisItem;
  }

  var height = numerator / denominator;

  for (i = 0; i < images.length; i++) {
    images[i].height = height;
  }

  if (repeat) {
    repeat = false;
    setTimeout(function() {
      resizeImages();
    }, 300)


  }


}
div.row {
  white-space: nowrap;
}
<html>

<head>
  <title></title>
</head>

<body>



  <div class="row">
    <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" alt=""><!--
        --><img style="padding-left:5px;" src="https://jessehouwing.net/content/images/size/w600/2018/07/stackoverflow-1.png" alt=""><!--
        --><img src="http://www.andysowards.com/blog/assets/8-Best-Websites-That-Will-Hone-Your-Programming-Skills-7-1024x538.png" alt="">
  </div>




</body>

</html>

Upvotes: 1

MTBthePRO
MTBthePRO

Reputation: 520

I used CSS Grid for your implementation. .row is 100% width and each image can have its own custom scaling if need be.

Be aware, images are hard make constant because each image will come with its own ratio and size. You can use background-size to set image property to your liking.

The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Hope the example below helps.

Reference background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Reference CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/ 

img {
     height: 130px;
     width: 100%;
}

.row{  
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(5, 1fr);
 /* If each individual picture column need modification*/
 /* grid-template-columns: auto 1fr 200px 15px 10%; */
}
<div class="row">
  <img src="https://loremflickr.com/cache/resized/8447_7961096220_79eb4fb07c_c_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_40670884373_757596f5d1_b_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_47957578362_73f1562d77_z_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_46970967485_3456a6be5f_z_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/2544_3722368834_5584ab3bc1_z_640_360_nofilter.jpg" alt="">
</div>

Upvotes: 0

Related Questions