如何在TailwindCSS的8列网格中实现图片高度自适应文本高度

要实现图片高度始终与左侧文本一致，同时保持响应式布局，可按以下方式修改代码：

修改后的完整代码 #

<div className="grid grid-cols-8 gap-4 md:grid-cols-1">
  <div className="col-start-2 col-end-5 md:col-span-1">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
      tempora perferendis tenetur quia vitae blanditiis, excepturi quo
      inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
      at? Fuga ipsa unde consectetur nobis consequatur tempore
      asperiores, quos alias similique, rerum nemo illo qui quidem
      accusantium molestiae voluptates deleniti praesentium sint?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
      obcaecati accusamus quam eius doloremque. Error dignissimos modi
      eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
      commodi amet repudiandae ut ab quos. Reiciendis officia placeat
      harum nulla obcaecati magni accusantium dolorem architecto ullam,
      ratione cumque distinctio consectetur esse deleniti.
    </p>
  </div>

  <div className="col-start-6 col-end-8 md:col-span-1 h-full">
    <img alt="dummy" src="https://via.placeholder.com/300x500" className="w-full h-full object-cover" />
  </div>
</div>

核心调整说明 #

• 图片容器添加h-full：让图片所在的网格单元格高度自动匹配左侧文本容器的高度（网格行高由文本内容动态决定）。
• 图片设置w-full h-full object-cover：
  • w-full h-full确保图片铺满整个容器；
  • object-cover让图片保持原始比例并填充容器（若希望完整显示图片，可替换为object-contain，但容器会出现空白区域）。
• 响应式列布局适配：添加md:grid-cols-1，在小屏幕（768px以下）将布局改为单列，文本与图片垂直堆叠，此时图片仍会填满所在单元格高度。

特殊场景补充 #

若需要在垂直堆叠时，图片高度严格等于文本高度且不裁剪，纯CSS实现会存在限制（因为文本高度是动态变化的）。这种情况可通过JavaScript获取文本容器的高度，再动态设置图片容器的高度，结合Tailwind工具类完成适配。

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