时间戳

首页 > 解决方案 > 在警报内插入图像而不调整元素大小

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条件的结果）

标签： htmlcsstwitter-bootstrap

解决方案

你的意思是你想要一个 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()如果需要支持多种浏览器的兼容性。你也可以参考这张表

背后的理念：

  • 容器固定高度，小于图片
  • 图像元素高度将溢出部分划分为边距
  • absolute 用于定位图像：如果您不喜欢 absolute，您也可以使用负边距来实现相同的效果，该示例只是概念证明并展示了一种可能性
  • flex 是一种现代且简单的垂直对齐项目的方法，您可以阅读规格以获取更多详细信息

推荐阅读