英文:
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"）。在截图中，您可以看到一个小的步骤，因为这张图片的高度没有填满"div"的100%。我不知道如何修复它。
英文:
I'm codding such grid with pictures in Bootstrap 5 framework.
My code for this grid:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#project_images img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
All pictures have different sizes. And with CSS rules above they all fit in "div" perfectly, except for bottom right image (name "Geotar_5.jpg"). At the screenshot you can see a little step, because this image haven't 100% height of the "div". And I don't know how to fix it.
答案1
得分: 2
将col-md-4添加d-flex align-items-stretch Bootstrap类。
查看下面的代码片段。
英文:
Add d-flex align-items-stretch Bootstrap classes to the col-md-4.
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#project_images img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!-- language: lang-html -->
<!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/bootstrap@5.2.3/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/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论