图片未覆盖Bootstrap 5中的所有div。

huangapple
go评论91阅读模式
英文:

Image doesn't cover all div in Bootstrap 5

问题

我在Bootstrap 5框架中使用图片创建了这样的网格。
图片未覆盖Bootstrap 5中的所有div。

我的网格代码：

  1. #project_images img {
  2.   height: 100%;
  3.   width: 100%;
  4.   object-fit: cover;
  5. }
  1. <section>
  2.   <div class="container" id="project_images">
  3.     <div class="row gy-3 gy-lg-4">
  4.       <div class="col-12">
  5.         <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
  6.           <div class="col-12 col-md-7"><img class="img-fluid" src="assets/img/Geotar_1.jpg"></div>
  7.           <div class="col-12 col-md-5"><img class="img-fluid" src="assets/img/Geotar_2.jpg"></div>
  8.         </div>
  9.       </div>
  10.       <div class="col-12">
  11.         <div class="row gx-3 gy-3 gx-lg-4">
  12.           <div class="col"><img class="img-fluid" src="assets/img/Geotar_3.jpg"></div>
  13.           <div class="col-md-4">
  14.             <div class="row gx-0 gy-3 gy-lg-4">
  15.               <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_4.jpg"></div>
  16.               <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_5.jpg"></div>
  17.             </div>
  18.           </div>
  19.         </div>
  20.       </div>
  21.     </div>
  22.   </div>
  23. </section>

所有图片都具有不同的尺寸。使用上面的CSS规则，它们都完美地适应了"div"，除了右下角的图片（名为"Geotar_5.jpg"）。在截图中，您可以看到一个小的步骤，因为这张图片的高度没有填满"div"的100%。我不知道如何修复它。
图片未覆盖Bootstrap 5中的所有div。

英文:

I'm codding such grid with pictures in Bootstrap 5 framework.
图片未覆盖Bootstrap 5中的所有div。

My code for this grid:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #project_images img {
  2.   height: 100%;
  3.   width: 100%;
  4.   object-fit: cover;
  5. }

<!-- language: lang-html -->

  1. &lt;section&gt;
  2.             &lt;div class=&quot;container&quot; id=&quot;project_images&quot;&gt;
  3.                 &lt;div class=&quot;row gy-3 gy-lg-4&quot;&gt;
  4.                     &lt;div class=&quot;col-12&quot;&gt;
  5.                         &lt;div class=&quot;row gx-3 gy-3 gx-lg-4 gy-lg-4&quot;&gt;
  6.                             &lt;div class=&quot;col-12 col-md-7&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;assets/img/Geotar_1.jpg&quot;&gt;&lt;/div&gt;
  7.                             &lt;div class=&quot;col-12 col-md-5&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;assets/img/Geotar_2.jpg&quot;&gt;&lt;/div&gt;
  8.                         &lt;/div&gt;
  9.                     &lt;/div&gt;
  10.                     &lt;div class=&quot;col-12&quot;&gt;
  11.                         &lt;div class=&quot;row gx-3 gy-3 gx-lg-4&quot;&gt;
  12.                             &lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;assets/img/Geotar_3.jpg&quot;&gt;&lt;/div&gt;
  13.                             &lt;div class=&quot;col-md-4&quot;&gt;
  14.                                 &lt;div class=&quot;row gx-0 gy-3 gy-lg-4&quot;&gt;
  15.                                     &lt;div class=&quot;col-12&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;assets/img/Geotar_4.jpg&quot;&gt;&lt;/div&gt;
  16.                                     &lt;div class=&quot;col-12&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;assets/img/Geotar_5.jpg&quot;&gt;&lt;/div&gt;
  17.                                 &lt;/div&gt;
  18.                             &lt;/div&gt;
  19.                         &lt;/div&gt;
  20.                     &lt;/div&gt;
  21.                 &lt;/div&gt;
  22.             &lt;/div&gt;
  23.         &lt;/section&gt;

<!-- 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.

图片未覆盖Bootstrap 5中的所有div。

答案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 -->

  1. #project_images img {
  2.   height: 100%;
  3.   width: 100%;
  4.   object-fit: cover;
  5. }

<!-- language: lang-html -->

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;utf-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  7.   &lt;title&gt;Bootstrap demo&lt;/title&gt;
  8.   &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot;&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12.   &lt;section&gt;
  13.     &lt;div class=&quot;container&quot; id=&quot;project_images&quot;&gt;
  14.       &lt;div class=&quot;row gy-3 gy-lg-4&quot;&gt;
  15.         &lt;div class=&quot;col-12&quot;&gt;
  16.           &lt;div class=&quot;row gx-3 gy-3 gx-lg-4 gy-lg-4&quot;&gt;
  17.             &lt;div class=&quot;col-12 col-md-7&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&amp;height=900&amp;quality=85&amp;auto=format&amp;fit=crop&amp;s=b6094b41c691a8bf00a5f1f689b9e83f&quot;&gt;&lt;/div&gt;
  18.             &lt;div class=&quot;col-12 col-md-5&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&amp;height=900&amp;quality=85&amp;auto=format&amp;fit=crop&amp;s=b6094b41c691a8bf00a5f1f689b9e83f&quot;&gt;&lt;/div&gt;
  19.           &lt;/div&gt;
  20.         &lt;/div&gt;
  21.         &lt;div class=&quot;col-12&quot;&gt;
  22.           &lt;div class=&quot;row gx-3 gy-3 gx-lg-4&quot;&gt;
  23.             &lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&amp;height=900&amp;quality=85&amp;auto=format&amp;fit=crop&amp;s=b6094b41c691a8bf00a5f1f689b9e83f&quot;&gt;&lt;/div&gt;
  24.             &lt;div class=&quot;col-md-4 d-flex align-items-stretch&quot;&gt;
  25.               &lt;div class=&quot;row gx-0 gy-3 gy-lg-4&quot;&gt;
  26.                 &lt;div class=&quot;col-12&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&amp;height=900&amp;quality=85&amp;auto=format&amp;fit=crop&amp;s=b6094b41c691a8bf00a5f1f689b9e83f&quot;&gt;&lt;/div&gt;
  27.                 &lt;div class=&quot;col-12&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;https://i.imgur.com/K2R24I4.jpeg&quot;&gt;&lt;/div&gt;
  28.               &lt;/div&gt;
  29.             &lt;/div&gt;
  30.           &lt;/div&gt;
  31.         &lt;/div&gt;
  32.       &lt;/div&gt;
  33.     &lt;/div&gt;
  34.   &lt;/section&gt;
  36.   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  37. &lt;/body&gt;
  39. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月29日 01:18:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76352680.html
  • bootstrap-5
  • css
  • html
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定