Вставить изображение внутри оповещения без изменения размера элемента

Question

Как мне стилизовать это:

<div class="alert alert-dark" role="alert">
  <div class="media">
    <img th:if="${categoria.icone}" th:src="@{/imagem/download/__${categoria.icone.id}__}" width="64px" height="64px" class="mr-3" th:alt="${categoria}">
    <svg th:unless="${categoria.icone}" width="64px" height="64px" 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%" fill="#dee2e6" dy=".3em">#</text>
    </svg>
    <div class="media-body">
      <h5 th:each="t : ${categoria.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:utext="${t.conteudo}"></h5>
    </div>
  </div>
</div>

В некотором смысле изображение не изменяет высоту элемента оповещения, но оно отображается с краями вне зоны оповещения. (теги img и svg никогда не отображаются одновременно, они зависят от результата условного выражения th:if)

Answer 1

Вы имели в виду, что вы хотите, чтобы CSS стилизовал окно оповещения, подобное этому эффекту?

.alert {
  min-width: 100%;
  background: lightgray;
  height: 50px;
  position: relative;
}

.media {
  height: 100%; /* fill up height */
}

.media-body {
  margin-left: calc(64px + 1em + 8px); /* image width + left of img + any margin */
  
  /* align vertical center */
  display: flex;
  align-items: center;
  height: 100%; /* fill up height */
}

.media-body h5 {
  margin: 0;
}

img, svg {
   position: absolute;
   top: -7px;
   left: 1em; /* you may use em if you wants the position have a relationship with container font-size */
}

<div class="alert alert-dark" role="alert">
  <div class="media">
<img th:if="${categoria.icone}" th:src="@{/imagem/download/__${categoria.icone.id}__}" width="64px" height="64px" class="mr-3" th:alt="${categoria}">
    <svg th:unless="${categoria.icone}" width="64px" height="64px" 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%" fill="#dee2e6" dy=".3em">#</text>
    </svg>
    <div class="media-body">
      <h5 th:each="t : ${categoria.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:utext="${t.conteudo}">something here</h5>
    </div>
  </div>
</div>

Если направление верное, вот дополнительная информация, которую вы можете принять во внимание.

• The calc() совместимость, если вам требуется поддержка различных браузеров. Вы также можете обратиться к этой таблице

Концепция:

• контейнер фиксированной высоты, меньше, чем изображение
• изображение Высота элемента делит часть переполнения как поле
• абсолютное для позиционирования изображения: если вам не нравится абсолютное значение, вы также можете использовать отрицательное поле для достижения того же результата, пример является лишь подтверждением концепции и демонстрирует один из возможности
• flex - это современный и простой способ выравнивания элементов по вертикали, вы можете прочитать specs для более подробной информации