如何用Tailwind实现图片覆盖整个section（结合Flexbox）

我想要实现如图所示的布局效果（使用Tailwind CSS）：

当前我已编写了如下代码：

<section class="bg-juli-white pt-24">
    <div class="max-w-6xl mx-auto flex flex-col">
      <h1 class="self-end text-juli-red text-4xl font-bold">meet the team.</h1>
      <img
        src="https://images.pexels.com/photos/15860716/pexels-photo-15860716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
        alt=""
        class="w-52 self-end"
      />
    </div>
  </section>
  <section class="bg-juli-peach py-10 px-10 w-full h-40">
    <h3 class="text-white font-bold">
      Incididunt laboris labore consequat nisi.
    </h3>
  </section>

由于网站整体大量使用Flexbox布局，请问最直接的修改方法是什么？

结合目标设计和你现有代码，用Flexbox实现的最直接修改方案如下：

• 调整顶部区域的布局方向
  把第一个section内部的div容器类从flex flex-col改成flex flex-col md:flex-row items-center justify-between px-4。这样小屏保持垂直排列，大屏自动切换为左右分布，同时用justify-between让标题和图片分别靠左右两端，完美匹配目标布局的横向排版。

• 修正图片的对齐规则
  去掉图片的self-end类，换成ml-auto md:ml-0 mb-6 md:mb-0。小屏时图片自动靠右，大屏时取消右侧外边距，和标题分别占据容器两端，同时添加mb-6保证小屏下标题和图片的间距。

• 优化底部橙色条的内容排版
  给第二个section的h3外层加一个嵌套flex容器，用max-w-6xl mx-auto px-4 h-full flex items-center实现：内容宽度和顶部保持一致、文本垂直居中、避免小屏内容贴边。同时可以给h3加text-lg调整字号，让视觉层级更合理。

修改后的完整代码：

<section class="bg-juli-white pt-24 pb-12">
  <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
    <h1 class="text-juli-red text-4xl font-bold">meet the team.</h1>
    <img
      src="https://images.pexels.com/photos/15860716/pexels-photo-15860716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
      alt="团队成员照片"
      class="w-52 ml-auto md:ml-0 mb-6 md:mb-0"
    />
  </div>
</section>
<section class="bg-juli-peach w-full h-40">
  <div class="max-w-6xl mx-auto px-4 h-full flex items-center">
    <h3 class="text-white font-bold text-lg">
      Incididunt laboris labore consequat nisi.
    </h3>
  </div>
</section>

核心改动说明 #

• 用md:flex-row实现响应式适配，兼顾移动端和桌面端体验
• 全程基于Flexbox属性调整，和你网站的技术栈保持统一
• 新增px-4处理小屏内边距，避免内容贴边
• 底部橙色条用嵌套Flex实现垂直居中，确保文本在高度固定的容器里对齐正确

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