【发布时间】：2021-04-21 08:26:04
【问题描述】：
这是简单的 html 代码和引导轮播，其中包含三个要滑动的图像，然后添加了一个叠加层以使轮播标题更具吸引力！它在大屏幕尺寸上运行良好，但在包括手机（智能手机）在内的小屏幕尺寸上，覆盖层的高度比旋转木马的高度增加！即使在小屏幕尺寸上，如何使它们具有相同的高度？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"rel="stylesheet">
<link href="phcoding/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
<title>| Catering Services |</title>
<style>
.overlay {
position: relative;
width: 100%;
min-height:100%;
background-color: #080d15;
opacity: .5;
z-index:1000;
}
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
max-height: 100%;
}
.carousel-caption {
position: absolute;
right: 15%;
top: 50%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
z-index:1000
}
</style>
</head>
<body>
<section id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand">Catering</a>
<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 ml-auto">
<li class="nav-item-active">
<a class="nav-link justin" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#service">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#sample">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
</div>
</ul>
</nav>
</section>
<!---carousel--->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_03_hd_pictures_167556.jpg" alt="First slide">
<div class="carousel-caption">
<h5>Bringing the world to your table
</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/food_picture_05_hd_picture_167554.jpg" alt="Second slide">
<div class="carousel-caption">
<h5>Creating memories that last a lifetime</h5>
</div>
</div>
<div class="carousel-item">
<div class="overlay">
</div>
<img class="d-block w-100" src="https://images.all-free-download.com/images/graphiclarge/fruit_juice_and_fruit_stock_photo_167154.jpg" alt="Third slide">
<div class="carousel-caption">
<h5>Filling every occasion with great food and service.</h5>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="jsplugins/js/jquery.min.js"></script>
<script src="jsplugins/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
【问题讨论】：
-
制作img
height: 100%;
标签： html css bootstrap-4