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

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 是一种现代且简单的垂直对齐项目的方法