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>