在列表组项目中使用图像占据所有内部空间

Question

我应该如何风格化这个：

<div class="list-group">

  <li class="list-group-item">

    <div class="media">

      <img th:if="${geral.logo}" th:src="@{/imagem/download/__${geral.logo.id}__}" width="180px" height="360px" class="mr-3" th:alt="${geral.titulo}">

      <svg th:unless="${geral.logo}" width="180px" height="360px" class="bd-placeholder-img mr-3" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">

        <title>Placeholder</title>

        <rect width="100%" height="100%" fill="#868e96"></rect>

        <text x="50%" y="50%" transform="rotate(90)" fill="#dee2e6" dy=".3em" th:text="${geral.titulo}"></text>

      </svg>

    </div>

  </li>

...

</div>

在某种程度上，图像占据了list-group-item元素的所有空间，图像边缘和项目边框之间没有空白。

更新

我试过这个：

html:

<div class="list-group">

  <li class="list-group-item">

    <div class="media logo">

      <img th:if="${geral.logo}" th:src="@{/imagem/download/__${geral.logo.id}__}" width="180px" height="360px" class="mr-3" th:alt="${geral.titulo}">

      <svg th:unless="${geral.logo}" class="bd-placeholder-img mr-3" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">

        <title>Placeholder</title>

        <rect width="100%" height="100%" fill="#868e96"></rect>

        <text x="50%" y="50%" transform="rotate(90)" fill="#dee2e6" dy=".3em" th:text="${geral.titulo}"></text>

      </svg>

    </div>

  </li>

...

</div>

CSS：

li.list-group-item {

  padding: 0;

}

.logo {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}

但我总是看到图像右侧有一个空白区域。

Answer 1

这应该有效.list-group-item{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;}