Bootstrap设置w-100的图片无法占满父div全宽 position属性异常

问题根因 #

该问题是Bootstrap栅格规则+HTML元素默认特性共同导致的，核心原因有三点：

• Bootstrap的.col-*栅格类默认自带左右15px的内边距（栅格槽宽），直接放在列容器内的子元素宽度是按容器内容区宽度（即扣除内边距后的宽度）计算的，内边距区域会露出容器背景，视觉上呈现为图片没有占满全宽。
• <img>标签默认是display: inline行内元素，默认与父元素文本基线对齐，底部会产生3-4px的固有间隙；同时行内元素会识别HTML代码中的换行符为空白占位，也会挤占容器宽度。
• 硬编码在img标签上的固定height属性会和Bootstrap默认的img {height: auto}规则产生计算冲突，容易导致图片比例异常；如果直接用position属性调整且未给父容器设置定位锚点，会触发图片脱离文档流，引发父容器高度塌陷、布局错位。

修复步骤 #

按照以下顺序调整代码即可解决问题：

1. 给包裹图片的col-12容器添加Bootstrap内置的px-0工具类，移除栅格列默认的左右内边距，让容器内容区宽度和容器总宽度一致。
2. 给图片添加d-block工具类，将img从默认行内元素改为块级元素，彻底消除行内元素带来的底部间隙、空白符占位问题。
3. 移除img标签上硬写的height属性，如果需要固定图片高度，通过CSS样式设置，同时搭配object-fit: cover规则，避免图片被拉伸变形。
4. 修正img标签的src属性写法，不要在路径字符串中间换行，避免部分浏览器解析资源路径失败。

修复后参考代码 #

<div class="col-md-8 col-sm-12">
    <div class="row">
        <Navbar class="col-12 card shadow-sm" v-if="!isMobile"></Navbar>
        <!-- 新增px-0移除左右内边距 -->
        <div class="col-12 px-0" style="background:red">
            <!-- 新增d-block转块级元素，高度通过CSS设置，搭配object-fit保证图片不变形 -->
            <img 
                class="w-100 d-block"
                style="height: 334.73px; object-fit: cover;"
                src="/modern-minimalist-interior-with-armchair-empty-white-wall-3d-rendering.jpg"
            />
        </div>
    </div>
</div>

补充说明：如果你需要图片和上方Navbar保持左右对齐、保留栅格默认的槽宽，就不需要给父容器加px-0类，此时图片边缘和容器边缘存在间距是Bootstrap栅格的默认设计，属于正常表现。
非必要不要使用position: absolute调整图片位置，如果必须使用，一定要给图片的直接父容器添加position: relative作为定位锚点，避免脱离文档流引发布局异常。

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