Используйте изображение внутри list-group-item, занимающего все внутреннее пространство

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;
}

но я вижу пустое пространство справа от изображения.

обновление 2

html:

<div class="list-group">
  <li class="list-group-item" th:href="@{/}">
    <div class="media">
      <img th:if="${geral.logo}" th:src="@{/imagem/download/__${geral.logo.id}__}" width="180px" height="360px" th:alt="${geral.titulo}">
      <svg th:unless="${geral.logo}" class="bd-placeholder-img" width="180px" height="360px" 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%" fill="#dee2e6" dy=".3em" th:text="${geral.titulo}"></text>
      </svg>
    </div>
  </li>
...
</div>

css:

.media img {
  padding: 0;
}
.bd-placeholder-img {
  padding: 0;
}

окончательное решение

Следуя предложению в ответе ниже, я использую это css для достижения sh что Я хотел:

.list-group {
  margin-top: -128px;
  width: 180px;
}
li.list-group-item {
  padding: 0;
}

удалось сделать это только с padding: 0, добавленным к list-group-item и width: 180px, добавленным к list-group.

Answer 1

это должно работать

.list-group-item{
        padding: 0;
    }