使用ngSrc时图片溢出容器问题求助

我尝试将两张图片设置为首页链接，希望将它们放入可管理尺寸的容器中，并让图片处于填充模式。代码如下：

<a routerLink="/" class="flex justify-center items-center gap-8">
  <div class="h-[72px] w-[92px]">
    <img ngSrc="logos/logo1.png" priority fill/>
  </div>
  <div class="h-[38px] w-[122px]">
    <img ngSrc="logos/logo2.png" priority fill/>
  </div>
</a>

目前问题是这些图片溢出容器铺满整个屏幕，请问我哪里操作有误？

• 核心问题是包裹图片的容器缺少相对定位：Angular的fill指令会将图片设置为position: absolute，并拉伸至父容器边界，但如果父容器没有设置position: relative，图片会基于上层定位元素（甚至视口）填充，导致溢出。
• 给两个图片容器添加Tailwind的relative类即可解决：

修改后的代码：

<a routerLink="/" class="flex justify-center items-center gap-8">
  <div class="h-[72px] w-[92px] relative">
    <img ngSrc="logos/logo1.png" priority fill/>
  </div>
  <div class="h-[38px] w-[122px] relative">
    <img ngSrc="logos/logo2.png" priority fill/>
  </div>
</a>

补充说明：fill指令的作用是让图片占满父容器可用空间，但必须依赖父容器的定位上下文。添加relative后，图片的绝对定位范围会被限制在容器宽高内，不会再溢出屏幕。

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