使用Tailwind CSS时Flex容器内图片垂直拉伸问题求助

问题根源：Flex容器默认的align-items: stretch会让所有子项拉伸至容器的高度，导致图片所在的子div被拉成和文本框一样高，图片继承这个高度后就会失去原有宽高比。

给你三种可行的解决方法：

方法1：让图片容器不被拉伸 #

给图片外层的div添加align-self-start类，让它脱离默认的拉伸行为，保持自身高度：

<main class="flex justify-center pt-36"> <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <!-- 添加 align-self-start -->
      <div class="flex justify-center md:flex-none my-16 mx-8 align-self-start">
        <img class="min-w-80 md:w-80" src="images/random.jpg" alt="random-image">
      </div>
      <div class="flex justify-center my-16 text-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam?
      </div>
    </div>
  </div>
</main>

方法2：强制图片保持宽高比 #

给图片添加object-contain类，无论容器高度如何，图片都会按自身比例显示，不会变形：

<main class="flex justify-center pt-36"> <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8">
        <!-- 添加 object-contain -->
        <img class="min-w-80 md:w-80 object-contain" src="images/random.jpg" alt="random-image">
      </div>
      <div class="flex justify-center my-16 text-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam?
      </div>
    </div>
  </div>
</main>

方法3：修改整个Flex容器的对齐方式 #

给外层Flex容器添加items-start类，让所有子项顶部对齐，不再被拉伸：

<main class="flex justify-center pt-36"> <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <!-- 添加 items-start -->
    <div class="md:flex justify-center items-start my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8">
        <img class="min-w-80 md:w-80" src="images/random.jpg" alt="random-image">
      </div>
      <div class="flex justify-center my-16 text-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam?
      </div>
    </div>
  </div>
</main>

推荐优先用方法1或3，这样布局逻辑更清晰；如果需要图片在容器内适配显示，再用方法2。

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