防止图像扩展水平弹性框

Question

我有一个 3 列的水平弹性框。黑色列（左侧 1/3）是图像，白色列（中间 1/3）是文本，蓝色列（右侧 1/3）是文本。

问题是文本列本身与覆盖 white/blue 框的黑色条纹一样高。发生的问题是，我的图像（左侧的黑色列）将文本列拉伸到与自身一样大。

我假设图像自动想要保持宽高比，这会影响 flexbox 的整体高度。

我的目标是：我希望 flexbox 与最大的文本列一样高，但图像列不应该使 flexbox 变高。在 Tailwind 中，我在图像上添加了对象覆盖和对象中心（想法是图像填充黑框上的灰色条纹，覆盖它）。基本上，图像应该通过 object-fit 具有灰色框的尺寸。

我试过将图像高度设置为最大内容并尝试各种高度值，但我还没有找到合适的解决方案。有人可以帮忙吗？

<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>

Answer 1

删除 items-center class 使弹性项目具有相同的高度。为防止 img 更改左栏的高度，其位置应为 absolute。要定义 img 的位置，父标记应为 relative。 translate-x-1/2 和 right-1/2 两个 class 添加到 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/Whosebug/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>

防止图像扩展水平弹性框

Prevent image from expanding horizontal flex box

html

css

flexbox

css-grid

tailwind-css