Bootstrap5自定义Instagram feed图片无法填满单元格的问题求助

我使用HTML、CSS及Bootstrap5制作自定义Instagram图片流，目前遇到图片尺寸问题：表格单元格自动产生内边距，导致图片无法占据整个单元格。

HTML代码 #

<div class="container-fluid" style="padding-left: 5px ; padding-right: 5px;">
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-0"></div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <table class="gallery-table" id="gallery-container">
            <tr>
              <td>
                <img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza">
              </td>
              <td>
                <img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="fondane">
              </td>
              <td>
                <img src="immagini/esterna1.jpg" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza1">
              </td>
            </tr>
          </table>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-0"></div>
      </div>
    </div>

CSS代码 #

.gallery-img {
    aspect-ratio: 1/1;    
    width: 100%;
    height: auto;
    object-fit:cover;
}

解决方案 #

表格默认带有border-spacing（单元格间距）和td默认内边距，结合Bootstrap可能的全局样式影响，需要针对性重置：

1. 给表格添加样式消除单元格间距并占满容器：

.gallery-table {
  border-collapse: collapse; /* 合并边框，移除单元格间的默认空隙 */
  width: 100%; /* 确保表格填满父容器宽度 */
}

2. 移除表格单元格的内边距：

.gallery-table td {
  padding: 0; /* 清除单元格的默认内边距 */
}

将以上CSS添加到你的样式表中，图片就能完全填满单元格，实现类似Instagram的紧凑图片流效果。

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