亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在警報中插入圖像而不調整元素大小

在警報中插入圖像而不調整元素大小

青春有我 2024-01-11 10:34:47
我應該如何風格化這個:<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條件的結果)
查看完整描述

1 回答

?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

您的意思是您想要一個 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 是一種現代且簡單的垂直對齊項目的方法


查看完整回答
反對 回復 2024-01-11
  • 1 回答
  • 0 關注
  • 141 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號