My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the category "design" in the JSON file has a taller height compared to the category "website."
The HTML code is included in the JavaScript file because it needs to iterate over every data entry in the JSON.
$.getJSON('JSON/projects.json', function(data) {
let projects = data.projects;
let content = '';
jQuery.fn.reverse = [].reverse;
$.each(projects.reverse(), function(i, data) {
if (data.category == category.toLowerCase()) {
content += '<div class="col-md-6 mb-3" id="project-img"><a href="img/project/'+ data.img +'"data-lightbox="myproject" data-title="'+ data.caption +'"><img src="img/project/'+ data.img +'" alt="'+ data.caption +'" class="img-fluid"><br><br><a id="button2" href="'+ data.linkProject +'" target="_blank">Open This Project ></a><a id="button2" href="'+ data.linkDocumentation +'" target="_blank">Open Documentation ></a></a></div>';
}
});
$('#project-list').html(content);
});
I expect the columns to adjust to the height of the image so there are no gaps.