html - 无法使图像适合父元素

问题描述

我是 bootstrap 4 的新手。我正在尝试使用 bootstrap 构建一个响应式网站进行练习。我的图像无法调整大小以适合屏幕时出现问题。

<html lang="en">
<head>
    <!-- Required Meta Data -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;700&display=swap" rel="stylesheet">

    <!-- Bootstraps CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
    <!-- Custome CSS -->
    <link rel="stylesheet" href="app.css">

    <title>Museum of Candy</title>
</head>
<body>
    
    <nav id="mainNavbar" class="navbar navbar-dark  navbar-expand-md py-0 fixed-top">
        <a href="#" class="navbar-brand">CANDY</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navLinks" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">HOME</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">ABOUR</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">TICKETS</a>
                </li>
            </ul>
        </div>        
    </nav>

    <section class="container-fluid px-0">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="text-white text-center d-none d-lg-block">
                    <h2 class="">MUSEUM OF CANDY</h2>
                    <h2 class="">MUSEUM OF CANDY</h2>
                    <h2 class="">MUSEUM OF CANDY</h2>
                </div>
            </div>
            <div class="col-lg-6 px-0">
                <img class="img-fluid" src="imgs/img1.jpg" alt="Hand Donut">
            </div>
        </div>
    </section>



    <!-- Optional JavaScript -->
    <!-- JQuery First, Then Popper.js, then Bottstarp JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

在这种情况下，我的图像没有覆盖整个列空间并留下一部分。

即使我将屏幕大小调整为中等分辨率图像也没有覆盖全屏

当我尝试向其中添加 css 时，它们被越过了。

CSS 文件

body{
    background: #f5d9d5;
    font-family: "Nunito", sans-serif;
}



#mainNavbar{
    font-size: 1.5rem;
    font-weight: 100;
}

#mainNavbar .nav-link{
    color: white;
}

#mainNavbar .nav-link:hover{
    color: #EA1C2C;
}

#mainNavbar .navbar-brand{
    color: #EA1C2C;
}

标签： htmlcssbootstrap-4flexbox

html - 无法使图像适合父元素

问题描述

解决方案

推荐阅读