2023年5月29日 01:18:05go评论52阅读模式

英文:

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:

#project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

&lt;section&gt;
            &lt;div class=&quot;container&quot; id=&quot;project_images&quot;&gt;
                &lt;div class=&quot;row gy-3 gy-lg-4&quot;&gt;
                    &lt;div class=&quot;col-12&quot;&gt;
                        &lt;div class=&quot;row gx-3 gy-3 gx-lg-4 gy-lg-4&quot;&gt;
                            &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;
                            &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;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-12&quot;&gt;
                        &lt;div class=&quot;row gx-3 gy-3 gx-lg-4&quot;&gt;
                            &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;
                            &lt;div class=&quot;col-md-4&quot;&gt;
                                &lt;div class=&quot;row gx-0 gy-3 gy-lg-4&quot;&gt;
                                    &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;
                                    &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;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;

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.

#project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;Bootstrap demo&lt;/title&gt;
  &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;
&lt;/head&gt;

&lt;body&gt;
  &lt;section&gt;
    &lt;div class=&quot;container&quot; id=&quot;project_images&quot;&gt;
      &lt;div class=&quot;row gy-3 gy-lg-4&quot;&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;div class=&quot;row gx-3 gy-3 gx-lg-4 gy-lg-4&quot;&gt;
            &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;
            &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;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;div class=&quot;row gx-3 gy-3 gx-lg-4&quot;&gt;
            &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;
            &lt;div class=&quot;col-md-4 d-flex align-items-stretch&quot;&gt;
              &lt;div class=&quot;row gx-0 gy-3 gy-lg-4&quot;&gt;
                &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;
                &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;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &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;
&lt;/body&gt;

&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

Vue中的动态CSS类。

同宽的子元素在内联弹性盒中

恐慌：打开模板/layout-main-page.html时出错：系统找不到指定的路径

将某一列从一行移动到下一行。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论