强制图像匹配 Tailwind 中父 flexbox 的尺寸

Posted 2023-03-07

【中文标题】强制图像匹配 Tailwind 中父 flexbox 的尺寸

【英文标题】：Force image to match dimension of parent flexbox in Tailwind

【发布时间】：2021-08-03 18:56:19

【问题描述】：

我想强制图像与父 div 的尺寸相匹配而不会溢出。

https://play.tailwindcss.com/Ul6j6jBG5o?layout=horizontal

<div class="flex flex-col max-h-screen">
  <div class="flex flex-1">
    <div class="flex w-1/2 max-h-full">
      <img src="image.jpg" class="max-h-full object-cover overflow-hidden" />
    </div>
    <div class=""><p>Column Two</p></div>
  </div>
</div>

我希望图像与弹性框的宽度和高度相匹配（例如，不滚动）有没有办法实现这一点？

【参考方案1】：

使用object-scale-down 缩小图像并适合容器或使用object-fit

【参考方案2】：

将此添加到您的代码中：

body > div > div 
  min-height: 0;


img 
  width: 100%;
  object-fit: cover;

详情请看：Why don't flex items shrink past content size?