Bootstrap列适配图片高度问题：JSON动态加载消除间距

问题背景 #

通过JavaScript加载JSON动态生成Bootstrap的col-md-6列，其中category=design的图片高度远大于category=website的图片，导致列之间出现不规则间隙，需要让列高度适配图片高度，消除这些间隙。

用户当前生成HTML的代码：

$.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);
    });

解决方案 #

1. 先修正HTML结构错误

循环中重复使用了id="project-img"和id="button2"，ID必须唯一，改成class：

content += '<div class="col-md-6 mb-3 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 class="button2" href="'+ data.linkProject +'" target="_blank">Open This Project ></a><a class="button2" href="'+ data.linkDocumentation +'" target="_blank">Open Documentation ></a></a></div>';

2. 方法一：利用Bootstrap Flex等高列

确保父容器是Bootstrap的row，给row添加align-items-stretch类，让每一行的列自动拉伸到最高列的高度：

<!-- 确保#project-list的父元素是带以下类的row -->
<div class="row align-items-stretch" id="project-list"></div>

这样每一行的col-md-6会自动和同行列的高度保持一致，消除间隙。

3. 方法二：统一图片显示比例（适合不需要保留原比例的场景）

给图片容器添加固定宽高比，让图片填充容器，避免高度差异：

.project-img img {
    width: 100%;
    height: 300px; /* 固定高度可按需调整 */
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}

或者用Bootstrap内置的aspect-ratio类，直接加在图片标签上：

// 修改生成的img标签，添加aspect-ratio类
<img src="img/project/'+ data.img +'" alt="'+ data.caption +'" class="img-fluid aspect-ratio-4x3">

4. 方法三：动态同步每行列的高度（适合需要保留图片原高度的场景）

在图片全部加载完成后，计算每一行的最高列高度，同步给同行列：

$.getJSON('JSON/projects.json', function(data) {
    // ... 原生成content的代码 ...

    $('#project-list').html(content);

    // 等待所有图片加载完成
    $('#project-list img').on('load', function() {
        // 按行处理（md下一行2个col-md-6）
        let rows = [];
        $('#project-list .col-md-6').each(function(index) {
            const rowIndex = Math.floor(index / 2);
            if (!rows[rowIndex]) rows[rowIndex] = [];
            rows[rowIndex].push($(this));
        });

        // 同步每行高度
        rows.forEach(row => {
            let maxHeight = 0;
            row.forEach(col => {
                maxHeight = Math.max(maxHeight, col.height());
            });
            row.forEach(col => {
                col.height(maxHeight);
            });
        });
    });
});

内容的提问来源于stack exchange，提问作者dwnld 017