如何实现图片重叠主div边框且仍被包裹在主div容器内的布局

修改思路 #

调整绝对定位的偏移量、容器尺寸计算规则，同时补全图片的自适应规则，即可同时满足两个需求，具体修改如下：

1. 修正后的CSS代码 #

.box {
    border: 2px solid #000;
    border-radius: 5px;
    font-family: sans-serif;
    max-width: 300px;
    position: relative;
}

.image {
    position: absolute;  
    /* 偏移边框宽度，让图片对齐边框外边缘 */
    top: -2px;
    left: -2px;
    /* 尺寸加上两侧边框总宽度，刚好完全覆盖边框且不超出容器 */
    max-width: calc(100% + 4px);
    max-height: calc(100% + 4px);
}

/* 补全图片自适应规则 */
.box__image {
    width: 100%;
    height: 100%;
    /* 保持图片比例，contain是完整显示，cover是铺满容器可裁剪，按需调整 */
    object-fit: contain;
}

/* 如果需要下方文字不被图片遮挡，保留以下规则 */
.random {
    position: relative;
    z-index: 1;
}

2. 修正后的HTML代码 #

<div class="box">
  <div class="image">
    <img class="box__image" src="#" alt="#">
  </div> <!-- 修正原代码的闭合标签错误 -->
  
  <div class="random">
    <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum quis lacus sagittis vehicula eget sed diam. Nam quis sapien sem. Phasellus vehicula blandit nunc vel cursus. Nullam felis nisl, molestie ut ipsum sit amet, vulputate tempus nibh. </p>

   </div>
 </div>

核心规则说明 #

• top: -2px、left: -2px：让图片从.box的边框外边缘开始渲染，自然覆盖住边框区域
• calc(100% + 4px)：100%对应.box的内容区域宽度，加上左右2px边框总和4px，图片宽度刚好等于.box的总宽度，不会超出容器范围
• 给图片设置width: 100%、height: 100%保证图片可以自适应填充父级.image容器，object-fit属性控制图片的填充策略，不会出现拉伸变形

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