Bootstrap 5页面边距去除方案及响应式维护图尺寸咨询

一、解决页面边距无法去除的问题 #

你的代码中边距残留是因为Bootstrap的.container-fluid和.col自带默认内边距，同时桌面端设置100vw可能引发横向滚动条。以下是修正后的完整代码：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* 防止意外横向滚动 */
        }

        .full-width-img-container {
            margin: 0;
            padding: 0 !important; /* 覆盖container-fluid默认padding */
        }

        .full-width-img-container .row {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container .col {
            padding: 0; /* 去除col默认内边距 */
        }

        .full-width-img {
            width: 100%;
            height: auto; /* 保持图片比例 */
        }
    </style>
    <title>Strona w Budowie</title>
</head>
<body>
<div class="container-fluid full-width-img-container">
    <div class="row">
        <div class="col">
            <img src="img/mala.jpg.jpg" class="img-fluid d-block d-lg-none full-width-img" alt="mala grafika">
            <img src="img/b1.jpg" class="img-fluid d-none d-lg-block full-width-img" alt="duza grafika">
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键修改点：

• 给.full-width-img-container添加padding: 0 !important，覆盖.container-fluid的默认内边距
• 新增.full-width-img-container .col { padding: 0 }，移除列的默认内边距
• 删除桌面端width: 100vw的设置，避免触发横向滚动条
• 增加overflow-x: hidden，确保页面无横向滚动异常

二、移动端与桌面端图片尺寸建议 #

• 移动端（屏幕宽度<992px）：
  • 宽度建议设为750px（适配2倍像素密度的Retina屏幕，覆盖绝大多数主流手机），高度根据设计需求调整（比如全屏展示可参考800-900px）
  • 优先使用WebP格式，文件大小控制在100KB以内，保证加载速度
• 桌面端（屏幕宽度≥992px）：
  • 宽度建议设为1920px（适配1080P主流桌面分辨率），若需覆盖4K屏可设为2560px，高度按设计比例调整（比如16:9对应1080px或1440px）
  • 同样优先WebP格式，文件大小控制在200KB以内

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