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

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>如果方向正确，您可能会考虑以下一些附加信息。calc()如果需要支持多种浏览器则兼容性。背后的概念：容器固定高度，小于图像图像元素高度除以溢出部分作为边距绝对用于定位图像：如果您不喜欢绝对，您也可以使用负边距来实现相同的效果，该示例只是概念证明并演示了其中一种可能性Flex 是一种现代且简单的垂直对齐项目的方法