Estoy intentando manejar un carousel siguiendo un ejemplo pero se genera un vertical scroll cuando añado mi topnav
.
Css topnav:
html, body{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav{
background-color: #333;
overflow: hidden;
top: 0;
}
.topnav a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.topnav a.active{
background-color: #04AA6D;
color: white;
}
.topnav-right {
float: right;
}
Css carousel:
.top-content {
width: 100%;
padding: 0;
}
.top-content .carousel-item {
height: 100vh;
min-height: 400px;
}
.top-content .carousel-item img {
height: 100%;
object-fit: cover;
}
.top-content .carousel-control-prev {
border-bottom: 0;
}
.top-content .carousel-control-next {
border-bottom: 0;
}
.top-content .carousel-caption {
padding-bottom: 60px;
}
.top-content .carousel-caption h1 {
padding-top: 60px;
color: #fff;
}
.top-content .carousel-caption h3 {
color: #fff;
}
.top-content .carousel-caption .carousel-caption-description {
color: #fff;
color: rgba(255, 255, 255, 0.8);
}
.top-content .carousel-indicators li {
width: 16px;
height: 16px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50%;
}
Mi html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- CSS Folder -->
<link rel="stylesheet" type="text/css" href="css/carousel.css"/>
<link rel="stylesheet" type="text/css" href="css/media-queries.css"/>
<link rel="stylesheet" type="text/css" href="css/topnavbar.css"/>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQuery Slim -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div class="topnav">
<a href="#">Hoja uno</a>
<a href="displays.html">Displays</a>
</div>
<!-- Top content -->
<div class="top-content">
<!-- Carousel -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Barra superior -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/02.jpg" class="d-block w-100" alt="slide-img-1">
<div class="carousel-caption">
<h1>Primer Título</h1>
<div class="carousel-caption-description">
<p>Texto</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/02.jpg" class="d-block w-100" alt="slide-img-2">
<div class="carousel-caption">
<h3>Segundo Título</h3>
<div class="carousel-caption-description">
<p>Texto</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="images/02.jpg" class="d-block w-100" alt="slide-img-3">
<div class="carousel-caption">
<h3>Tercer Título</h3>
<div class="carousel-caption-description">
<p>Texto</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End carousel -->
</div>
</body>
</html>
Esto genera una vertical scroll:
¿Cómo puedo hacer para que no se gerene el scroll? Ya se que puedo ocultarlo pero eso no soluciona el problema. Quiero que la imagen se adapte a la pantalla sin necesidad de scrollear.