提问人：Nikita Pelevin 提问时间：5/29/2023 更新时间：5/29/2023 访问量：86
图像未涵盖 Bootstrap 5 中的所有 div
Image doesn't cover all div in Bootstrap 5
问：
我在 Bootstrap 5 框架中用图片制作了这样的网格。
我这个网格的代码：
#project_images img {
height: 100%;
width: 100%;
object-fit: cover;
}<section>
<div class="container" id="project_images">
<div class="row gy-3 gy-lg-4">
<div class="col-12">
<div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
<div class="col-12 col-md-7"><img class="img-fluid" src="assets/img/Geotar_1.jpg"></div>
<div class="col-12 col-md-5"><img class="img-fluid" src="assets/img/Geotar_2.jpg"></div>
</div>
</div>
<div class="col-12">
<div class="row gx-3 gy-3 gx-lg-4">
<div class="col"><img class="img-fluid" src="assets/img/Geotar_3.jpg"></div>
<div class="col-md-4">
<div class="row gx-0 gy-3 gy-lg-4">
<div class="col-12"><img class="img-fluid" src="assets/img/Geotar_4.jpg"></div>
<div class="col-12"><img class="img-fluid" src="assets/img/Geotar_5.jpg"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>所有图片都有不同的尺寸。有了上面的CSS规则，它们都完美地适合“div”，除了右下角的图像（名称“Geotar_5.jpg”）。在屏幕截图中，您可以看到一个小步骤，因为此图像没有 100% 的“div”高度。我不知道如何解决它。
答：
2赞
Rok Benko
5/29/2023
#1
将 Bootstrap 类添加到 .d-flex align-items-stretchcol-md-4
请参阅下面的代码片段。
#project_images img {
height: 100%;
width: 100%;
object-fit: cover;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container" id="project_images">
<div class="row gy-3 gy-lg-4">
<div class="col-12">
<div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
<div class="col-12 col-md-7"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
<div class="col-12 col-md-5"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
</div>
</div>
<div class="col-12">
<div class="row gx-3 gy-3 gx-lg-4">
<div class="col"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
<div class="col-md-4 d-flex align-items-stretch">
<div class="row gx-0 gy-3 gy-lg-4">
<div class="col-12"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
<div class="col-12"><img class="img-fluid" src="https://i.imgur.com/K2R24I4.jpeg"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
评论