bootstrap-4 - 在引导程序中管理具有背景图像的表格的响应式缩放的最佳方法是什么？

Question

我目前正在研究引导表（之前只是硬编码-html/css），并且引导程序处理某些事情的方式存在问题：

这是 HTML：

'''<header class="text-center mb-3 shadow rounded"
          style="background-image: url(...); background-repeat: no-repeat; background-size: 100%;">
          <div class="row">
            <div class="col-md-0 pr-1">
            </div>
            <div class="col-md-2"><img src="..." alt="logo" class="p-1" id="logo" style="display: none;">
            </div>
            <div class="col-md-9">
              <table class="table border-0" cellspacing="0" cellpadding="0" width="100%" height="100%">
                <tbody>
                  <tr>
                    <td class="align-middle" id="header_telefon" style="display: none;"><a href="#"
                        class="telefon"><img src="img/telefon.png" border="0" height="40"></a></td>
                    <td class="align-middle" id="header_script"><img src="..." alt="script" class="p-1"
                        style="width: 300px;"></td>
                    <td class="align-middle" id="header_maps" style="display: none;"><a href="#"
                        target="_blank"><img src="jpg/gmap.gif" border="0" width="40"></a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </header>'''

带有“col-md-0”的标签可能已经过时了，我只需要它来设置间距，就像我知道网格的总数只有 11 个一样 - 但否则布局会崩溃。

背景图像为 253 x 187 像素 (1.35)，在计算机上它在整个屏幕上呈现出可爱的一行，大约 180 像素高，因为徽标图片是 178 像素高和 165 像素宽。左侧是徽标，右侧是脚本图片。脚本图片非常低，已经缩小了 300 个。两张照片在同一行并且完全对齐。

我对此感到非常高兴。但是 - 还有一个 javascript，它正在对移动视图进行一些更改：

'''var h = document.getElementById("header_telefon");
        var l = document.getElementById("header_maps");
        var m = document.getElementById("logo");
        var n = document.getElementById("header_script");
        var windowWidth = window.screen.width < window.outerWidth ?
          window.screen.width : window.outerWidth;
        var mobile = windowWidth < 500;
        if (mobile) {
          l.style.display = "block";
          m.style.height = "100px";
          n.style.display = "none";
        };'''

之后，标志变小了（需要，否则背景图像底部的像素用完了），仍然在最左侧 - 这没关系。我没有脚本了（这是我喜欢的）。并且 - 2 个较小的图标图片在中间完全对齐 - 但每行一个。我原以为他们会在同一排！？我本来希望徽标下方第二行中的 2 个图标，都很好对齐 - 但没有。

但这还不是全部——由于某种原因，背景图像在每行之间留下了细小的白线！？它很小 - 但它不是很好！

顺便说一句，如果我将计算机视图中的窗口挤在一起，白线也会产生相同的效果。

有人知道为什么会发生这种情况，是否有办法让它成为它应该的样子？

标签： bootstrap-4html-table