我有一個 3 列的水平彈性框。黑色列（左側 1/3）是影像，白色列（中心 1/3）是文本，藍色列（右側 1/3）是文本。
問題是文本列本身與覆寫白色/藍色框的黑色條紋一樣高。發生的問題是，我的影像（左側的黑色）將文本列拉伸為與自身一樣大。
我假設影像會自動保持縱橫比，這會影響彈性盒的整體高度。
我的目標是：我想保持 flexbox 與最大的文本列一樣高，但影像列不應該讓 flexbox 變得更高。在 Tailwind 中，我在影像上添加了 object-cover 和 object-center（想法是影像填充了黑盒子上的灰色條紋，覆寫它）。基本上，影像應該通過物件擬合具有灰色框的尺寸。
我嘗試將影像高度設定為最大內容并使用各種高度值，但我還沒有找到一個像樣的解決方案。任何人都可以幫忙嗎？
<div class="flex items-center h-full">
<div class="w-1/3 black">
<img class="max-h-max object-cover object-center" />
</div>
<div class="w-1/3 white">
<p>Short Text</p>
</div>
<div class="w-1/3 blue">
<p>Short Text</p>
</div>
</div>
uj5u.com熱心網友回復：
洗掉items-center類使彈性專案具有相同的高度。為了防止img改變左列的高度，它的位置應該是absolute. 定義img父標簽的位置應該是relative. translate-x-1/2加了和兩個類right-1/2來帶img中心。
<script src="https://cdn.tailwindcss.com/"></script>
<div class="flex">
<div class="w-1/3 bg-stone-200 relative">
<img class="absolute translate-x-1/2 right-1/2 h-full" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png" />
</div>
<div class="w-1/3 bg-stone-50">
<p>Short Text</p>
</div>
<div class="w-1/3 bg-blue-900">
<p>Short Text</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411394.html
標籤：
上一篇：如何使影片進度條連續？