如何用TailwindCSS实现两张等大图片叠加并同步缩放？

要实现两张图片Z轴叠加且同步适配容器缩放，核心是解决定位基准和图片自适应规则的问题，以下是TailwindCSS的实现代码：

代码示例 #

场景1：父容器适配外部容器宽度（比如占满头部容器）

<div class="relative w-full">
  <img src="/i1.png" class="w-full h-auto" />
  <img src="/i2.png" class="absolute top-0 left-0 w-full h-auto" />
</div>

场景2：父容器尺寸由图片原始大小决定（保持图片自身比例）

<div class="relative inline-block">
  <img src="/i1.png" class="w-full h-auto" />
  <img src="/i2.png" class="absolute top-0 left-0 w-full h-auto" />
</div>

关键类说明 #

• relative：给父容器添加该类，让绝对定位的第二张图片以父容器为定位基准，避免脱离到页面其他位置。
• w-full h-auto：让两张图片宽度填充父容器，高度按原始宽高比自动缩放，保证两张图完全重合且同步响应容器缩放。
• 若需要图片强制填满容器（允许裁剪），可将h-auto替换为h-full object-cover，按需选择即可。

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