为何image元素背景色铺满父div？如何仅为image设置背景

问题原因 #

在Flex布局里，flex容器的子元素默认会在交叉轴方向被自动拉伸（对应CSS属性align-self: stretch）。你代码里第一个带h-24的父div是flex容器，设置了固定高度，里面的img作为flex子元素，会被拉到和容器一样高，所以img的背景色就铺满了整个父div的高度。

解决方法 #

要实现「仅img自身显示背景色，同时控制img高度」，可以用下面两种方式：

方式1：阻止img被flex容器拉伸 #

给img添加align-self-center（Tailwind类），让它在垂直方向保持自身尺寸，不被容器拉伸：

<div class="flex flex-col bg-blue-200 items-center">
  <div class="flex h-24">
    <img class="bg-red-300 object-contain align-self-center" src="http://via.placeholder.com/200x200" />
  </div>
  <div class="flex mt-12">
    <img class="bg-red-300 object-contain" src="http://via.placeholder.com/200x200" />
  </div>
</div>

方式2：直接给img设置固定高度 #

把h-24从父div移到img上，让父容器自动适配img的高度，避免强制拉伸img：

<div class="flex flex-col bg-blue-200 items-center">
  <div class="flex">
    <img class="bg-red-300 object-contain h-24" src="http://via.placeholder.com/200x200" />
  </div>
  <div class="flex mt-12">
    <img class="bg-red-300 object-contain" src="http://via.placeholder.com/200x200" />
  </div>
</div>

补充说明 #

object-contain只是控制图片内容的缩放方式，不会改变img元素本身的尺寸。所以当img被flex容器拉伸时，背景色会跟着元素的实际尺寸扩展，而非只覆盖图片内容区域。通过上面的方法固定img尺寸或阻止拉伸，就能让背景色只作用在img自身范围内。

内容的提问来源于stack exchange，提问作者Gabe