如何解决如何使 Bootstrap v5.0 Carousel 滑块的所有图像高度相等
我正在尝试使用 Bootstrap v5.0 Carousel 创建一个滑块。我对滑块图像有一些问题。图片的高度不相等。那个滑块看起来很丑。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Carousel</title>
</head>
<body>
<div class="bg-light">
<div class="container">
<div class="carousel slide" id="carousel1" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/slider 00.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="./images/slider 01.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="./images/slider 02.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="./images/slider 03.jpg" class="d-block w-100 h-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide=
prev>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">PrevIoUs</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide=
next>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</body>
</html>我怎样才能让它们都等高？
我尝试使用 CSS img height height: x px; 但这看起来很难看。我该如何解决这个问题？
解决方法
您可以在此选择器中使用固定高度 .carousel-inner div
.carousel-inner div {
height: 400px;
object-fit: cover;
}
.carousel-inner div {
height: 400px;
object-fit: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Carousel</title>
</head>
<body>
<div class="bg-light">
<div class="container">
<div class="carousel slide" id="carousel1" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" class="d-block w-100 h-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide=
prev>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide=
next>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
