如何使含绝对定位图片的子Div填满父容器并实现object-fit cover效果？

要让子容器完全填满父容器，并实现类似object-fit:cover的居中裁剪效果，只需调整内部容器和基础图片的样式，关键修改如下：

修改后的代码 #

<div class="parent" style="height: calc(100vw - 20px); border-radius: 20px; border:1px solid red;">
    <div class="child" style="width: 100%; height: 100%; position: relative; overflow:hidden;">
        <div class="2d-picture-wrapper" style="position:absolute; inset: 0; display: flex; justify-content: center; align-items: center; min-width: 100%; min-height: 100%;">
            <img src="https://youreka-virtualtours.be/images/objects/389/producten/vlag.png" style="min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;" class="2d-picture-base-image">
            <img src="https://youreka-virtualtours.be/images/sessions/389/200/2560px-KPN-Logo.svg.png" style="position: absolute; object-fit: contain; object-position: center; width: 12.6%; height: 10.2%; left: 34.2%; top: 41.3%; transform: rotateX(0.8deg) rotateY(51.5deg) rotateZ(0.7deg) translate(-50%, -50%); transform-style: preserve-3d; transform-origin: center;" class="2d-picture-logo">
        </div>
    </div>
</div>

关键调整说明 #

• 2d-picture-wrapper容器：

  • 用inset: 0替代原有的top:50%;left:50%;transform:translate(-50%,-50%)，让容器完全贴合父级child的边界；
  • 添加display:flex + justify-content:center + align-items:center，确保内部图片始终居中；
  • 保留min-width:100%;min-height:100%，保证容器尺寸不小于父级。

• 基础图片2d-picture-base-image：

  • 设置min-width:100%;min-height:100%;width:auto;height:auto，让图片保持原始比例的同时至少填满容器；
  • 添加object-fit:cover，确保图片超出容器的部分被自动裁剪，完美匹配object-fit:cover的效果。

• Logo图片：

  • 保留原有定位和变换样式，由于2d-picture-wrapper是绝对定位容器，Logo的绝对定位会自动基于该容器生效，不影响整体布局。

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