使用.img-fluid类后Bootstrap5图片仍无法适配父div存在宽度间隙问题

实际异常效果 #

问题根因 #

• 版本不匹配：声明使用Bootstrap5，但实际代码引入的是Bootstrap 4.1.3版本资源，BS4不支持g-0、border-2等BS5新增工具类，写的.g-0未生效，row默认的列间距没有清除，导致父容器本身存在内边距间隙。
• 图片类配置不全：.img-fluid仅实现最大宽度100%、高度自适应的效果，要保证图片完全填充满父容器宽度，需额外添加宽度100%配置，若需要高度也适配父容器，还要搭配object-fit属性避免图片拉伸变形。

解决方案 #

方案1：使用Bootstrap5 #

替换错误的BS4资源为官方BS5资源，补充图片填充类即可，修正后的完整代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="app.css">
    <title>Practice</title>
</head>
<body>
    <section class="container-fluid">
        <div class="row g-0 h-50 border border-2 border-success">
            <div class="col-6 px-0"></div>
            <div class="col-6 px-0">
                <!-- w-100保证宽度占满，h-100+object-fit-cover保证高度适配不变形 -->
                <img src="image-header-desktop.jpg" alt="" class="img-fluid w-100 h-100 object-fit-cover">
            </div>
        </div>
    </section>
    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

方案2：继续使用Bootstrap4 #

如果项目沿用BS4版本，将row上的g-0替换为BS4专属的清除间距类no-gutters，同时给图片添加w-100类即可，核心代码修改如下：

<!-- 替换g-0为no-gutters -->
<div class="row no-gutters h-50 border border-success">
    <div class="col-6 px-0"></div>
    <div class="col-6 px-0">
        <img src="image-header-desktop.jpg" alt="" class="img-fluid w-100">
    </div>
</div>

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