Help with Portfolio Page Image sizing

1

Hey Guys, my first post on here lol. I’m having a little trouble with my portfolio page project. My actual portfolio “section” is listed below. What I am looking to do here: 3 even height and width pictures on the top row and bottom row.
Obviously all the images I am using are different sizes. I was able to set the ‘max-height’ at a certain point and they were all aligned pretty well but I was unable to set the width or max-width. And when I have nothing set the images are just all over the place. I’ve been googling for a while and I can’t find anything else. Hoping you guys can help.
Also, is there a better way or layout for doing this? Right now I’m using div rows and columns. Idk if there is a better way to do this, but if there is please feel free to share. Thanks all!

my code pen: https://codepen.io/Wess2121/pen/EmBgKz?editors=1000

<div class="container-fluid">
    <h2>Portfolio</h2>
  <div class="row">
    <div class="col-md-4">
      <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/4/6/46a100e3400627b2a776250392718b5bfaa812d9.jpg'>
    </div>
    <div class="col-md-4">
    <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/a/b/abd6d49d028d25ad3bd964d9865d121077d762b9.jpg'>
      </div>
    <div class="col-md-4">
      <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/3/f/3f866415daa5c98b60313d331af42eae88a2eecd.jpg'>
    </div>
  </div>
    <div class="row">
      <div class="col-md-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/4/0/40c6f154e5a1c13c94fce63016f9436c245daee6.jpg'>
      </div>
      <div class="col-md-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/2/b/2b3e4cb2c4f1810af2a30457e0b75475f353c17b.jpg'>
      </div>
      <div class="col-md-4">
        <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/b/d/bd0754003d6d20ea523ccf9fa4818bce08fbf4b0.jpg'>
      </div>
    </div>
  </div>
  <div>
2

Hi Wes,

did you try using thumbnail? that should help with the alignment and the consistency of the sizes of your images.

Jasmine

3

Thanks! But I was able to figure it out with more googling. Appreciate the help regardless!

4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

5

thanks @kevcomedia !!

6