Html 在警报中插入图像而不调整元素大小

我应该如何将其风格化：

<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

条件的结果）

您的意思是希望CSS将警报框的样式设置为类似于此效果的样式吗

.alert{
最小宽度：100%；
背景：浅灰色；
高度：50px；
位置：相对位置；
}
.媒体{
高度：100%；/*填充高度*/
}
.媒体机构{
左边距：计算（64px+1em+8px）；/*图像宽度+图像左侧+任何边距*/
/*垂直居中对齐*/
显示器：flex；
对齐项目：居中；
高度：100%；/*填充高度*/
}
.媒体机构h5{
保证金：0；
}
img，svg{
位置：绝对位置；
顶部：-7px；
左：1em；/*如果希望职位与容器字体大小有关系，可以使用em*/
}

占位符
#
这里有东西

在警报区域外显示边缘是什么意思？你介意解释一下吗？大概是这样的：我增加了解释和参考，你可以参考。