Bootstrap 4实现全屏无滚动页面：2行3列自适应裁剪图片布局

我来帮你搞定这个全屏布局的问题，咱们先梳理下现有代码的核心问题，再针对性调整：

• 图片缺少自适应裁剪配置，没法随屏幕比例自动裁切
• 固定百分比的高度分配在不同宽高比屏幕上容易出现滚动或留白
• 全屏无滚动的逻辑没区分桌面/移动端
• 导航栏默认样式可能干扰布局高度

下面是调整后的完整代码，已经实现你想要的效果：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8">
    <!-- Mobile adaptation -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Page information -->
    <meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
    <meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
    <meta name="author" content="Ondřej Sloup">
    <!-- Imported Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
    <!-- Scripts (jQuery) -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    <!-- Mine Stylesheet -->
    <link rel="stylesheet" href="stylesheet/stylesheet.css">
    <!-- Tittle -->
    <title>Geo Expo</title>
</head>
<body class="d-flex flex-column">
    <header class="text-center py-3">
        <img class="logo img-fluid" src="./logo/PNG.png" alt="Logo" />
    </header>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>
        </button>
        <div class="collapse navbar-collapse justify-content-center" id="Toogle">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Repliky</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Unikáty</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Instalace</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
        </div>
    </nav>
    <main class="flex-grow-1 d-flex flex-column">
        <div class="row flex-grow-1 no-gutters">
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/bridge.jpg" alt="Bridge">
            </div>
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/park.jpg" alt="Park">
            </div>
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/tunnel.jpg" alt="Tunnel">
            </div>
        </div>
        <div class="row flex-grow-1 no-gutters">
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/bridge.jpg" alt="Bridge">
            </div>
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/park.jpg" alt="Park">
            </div>
            <div class="col-4 h-100">
                <img class="image w-100 h-100" src="./images/tunnel.jpg" alt="Tunnel">
            </div>
        </div>
    </main>
</body>
</html>

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
@import url('https://fonts.googleapis.com/css?family=Cinzel');

/* 全局布局控制 */
html, body {
    height: 100vh;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* 桌面端禁止滚动，移动端允许滚动 */
@media (min-width: 768px) {
    body {
        overflow: hidden;
    }
}

body {
    background: grey !important;
}

/* Header 样式 */
header {
    flex-shrink: 0;
}

.logo {
    max-height: 100%;
    max-width: 90%;
}

/* 导航栏样式 */
nav {
    font-size: 13pt;
    font-family: 'Cinzel', sans-serif;
    padding: .3rem 0 !important;
    text-transform: capitalize;
    background: rgba(0,0,0,0.5); /* 给导航栏加背景，增强可读性 */
    flex-shrink: 0;
}

.nav-link {
    color: #fff !important;
    margin: 0 1rem; /* 调整间距，避免移动端挤在一起 */
}

.nav-link:hover {
    text-decoration: underline;
}

/* 图片自适应裁剪 */
.image {
    object-fit: cover; /* 核心属性：保持比例并裁剪超出部分 */
    object-position: center; /* 裁剪时保留中心区域 */
}

/* 图片行布局 */
main .row {
    margin: 0;
}

关键修改点说明 #

1. Flexbox 全屏布局：

   • 给body添加d-flex flex-column，让header、nav、main垂直分配空间
   • 给main添加flex-grow-1，让它占满剩余的屏幕高度
   • 图片行和列都用h-100确保高度填满容器

2. 图片自适应裁剪：

   • 使用object-fit: cover让图片保持比例，同时裁剪超出容器的部分
   • object-position: center确保裁剪时保留图片的中心区域，避免重要内容被切掉

3. 全屏无滚动逻辑：

   • 通过媒体查询@media (min-width: 768px)，只在桌面端设置body { overflow: hidden; }，移动端允许正常滚动
   • 用height: 100vh确保html和body占满视口高度

4. 导航栏优化：

   • 给导航栏添加背景色，增强文字可读性
   • 调整.nav-link的margin，避免移动端导航项挤在一起
   • 用justify-content-center让导航项居中，替代原来的mx-auto

5. 高度分配优化：

   • 去掉固定百分比的高度设置，改用flex的grow/shrink属性自动分配空间，适配不同屏幕比例

这样调整后，就能实现你想要的：桌面端全屏无滚动，顶部居中logo，全宽导航，2行3列自适应裁剪的图片；移动端则允许正常滚动浏览内容。

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