html - 无法准确叠加图像（背景 SVG 上方的图像）

Question

语境

我正在尝试建立一个页面来显示足球运动员在球场上的位置。它们由衬衫图标显示，该图标由两部分组成：

• 衬衫的 SVG，颜色可定制
• 阴影的 PNG，与 SVG 的形状完全相同

问题

虽然在某些显示器/屏幕上图像排成一行，但在其他显示器/屏幕上，SVG 比 PNG 略大，这在美学上看起来并不好。我正在尝试将它们准确排列，否则效果将不起作用。

我还确保图像所在的空间应该是相同的宽度（父级的 100%），但是在查看开发人员工具时，背景有时会比其上方的 PNG 略高：

正如您在上面的示例中看到的，高度似乎不一致，因为一些图像似乎排列正确。这对我来说很奇怪，因为它们都有相同的 CSS 规则。

代码

#cont {
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  background-color: gray;
}

ul {
  height: 25%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  list-style: none;
  display: inline-block;
  width: 18%;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  margin: 0.5em 0;
  padding: 0.25em;
}

.kit {
  width: 100%;
  background-image: url(http://bkdev.co.uk/tmp/kit-bg.svg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

<div id="cont">
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
</div>

我怎样才能使这项工作正常进行，并确保两个图像都准确排列？或者这是一场野鹅追逐？

标签： htmlcsssvg