Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply enlarging a column.
To better understand what I am trying to achieve, please refer to the image linked below:
In my layout, I have 2 main columns. The first column is divided into two and contains two images sized at 555x670 pixels each. The second column is further divided into two columns with four images.
My goal is for the images in the second column (266x370) to adjust to match the height of the first column (555x670), ensuring that both sets of images have the same height while preserving their aspect ratios and responsiveness.
I welcome any suggestions, such as resizing the images, to achieve this effect. You can also view the CodePen link for reference where I used Bootstrap grid and set the width of the images to 100%.
.img370{
width:100%;
}
.img555{
width:100%;
}