im使用bootstrap启动了一个项目，我一直在想办法让这个图像覆盖我的容器的内部宽度时遇到了一些麻烦
有什么想法吗？？感谢您的帮助！！！
这是我的代码嘿，伙计们，
我用bootstrap启动了一个项目，我一直在想办法让这个图像覆盖我的容器的内部宽度时遇到了一点麻烦
有什么想法吗？？感谢您的帮助！！！
这是我的代码
:root {
--DarkerGray: #1b1d1d;
--Gray: #3F4545;
--MediumGray: #464a4a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--LighterGray: #eceaea;
--White: white;
--OrangeSelect: rgb(255, 166, 0);
}
html, body {
user-select: none;
}
.navbar {
background-color: var(--DarkBlue);
}
.nav-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item:hover {
background-color: var(--OrangeSelect);
}
#containerIMG {
width: 100%;
height: 500px;
object-fit: cover;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CARDÁPIO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> PRATOS </a>
<a class="dropdown-item" href="#"> LANCHES </a>
<a class="dropdown-item" href="#"> SOPAS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BEBIDAS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> ÁGUAS </a>
<a class="dropdown-item" href="#"> SUCOS </a>
<a class="dropdown-item" href="#"> REFRIGERANTES </a>
<a class="dropdown-item" href="#"> CERVEJAS </a>
<a class="dropdown-item" href="#"> VINHOS </a>
<a class="dropdown-item" href="#"> APERITIVOS </a>
<a class="dropdown-item" href="#"> DRINKS </a>
</li>
<li class="nav-item">
<a class="nav-link text-white">RESERVAR MESA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> PESQUISAR </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MINHA CONTA </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MEUS PEDIDOS</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid bg-dark">
<img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG">
</div>
</body>您必须删除.container-fluid类的填充，您可以在HTML 中将p-0添加到该类中
:root {
--DarkerGray: #1b1d1d;
--Gray: #3F4545;
--MediumGray: #464a4a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--LighterGray: #eceaea;
--White: white;
--OrangeSelect: rgb(255, 166, 0);
}
html, body {
user-select: none;
}
.navbar {
background-color: var(--DarkBlue);
}
.nav-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item:hover {
background-color: var(--OrangeSelect);
}
#containerIMG {
width: 100%;
height: 500px;
object-fit: cover;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CARDÁPIO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> PRATOS </a>
<a class="dropdown-item" href="#"> LANCHES </a>
<a class="dropdown-item" href="#"> SOPAS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BEBIDAS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> ÁGUAS </a>
<a class="dropdown-item" href="#"> SUCOS </a>
<a class="dropdown-item" href="#"> REFRIGERANTES </a>
<a class="dropdown-item" href="#"> CERVEJAS </a>
<a class="dropdown-item" href="#"> VINHOS </a>
<a class="dropdown-item" href="#"> APERITIVOS </a>
<a class="dropdown-item" href="#"> DRINKS </a>
</li>
<li class="nav-item">
<a class="nav-link text-white">RESERVAR MESA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> PESQUISAR </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MINHA CONTA </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MEUS PEDIDOS</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0 bg-dark">
<img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG">
</div
</body>