As I delve into web development, I have been using libraries like Bootstrap3 to enhance my skills. However, I want to expand my knowledge further by understanding and being able to replicate some of the functionalities available in Bootstrap on my own. Currently, I am experimenting with a custom grid layout and trying to insert responsive images into it. My goal is to make all the images appear at the same height regardless of their original sizes within the row. While I have managed to set the width as desired, achieving uniform height has proven tricky. I shared my progress on this Custom Grid CodePen for reference. Despite searches online, most solutions involve using the background-image property which is not applicable in my case. Any assistance on this matter would be highly appreciated. Thank you!
Edit:
HTML
<div class="row">
<div class="col-4">
<img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24">
</div>
<div class="col-4">
<img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="col-4">
<img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS
.row {
position: relative;
min-width: 100%;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
}
.responsiveImage {
max-width: 100%;
height: auto;
padding-top: 30%;
}