如何在屏幕引导程序的整个宽度上拉伸图像

我的头撞在墙上，试图找出如何使用CSS和bootstrap在div上拉伸图像。我试着让div和父容器都是流体，这很有帮助，但无论我做什么，图像的左右两侧总是有一些空白。

HTML

 <div class="container-fluid">
    <div class="row color-block-top"></div>
    <div class="row-fluid block">
      <img src="Images/family-beach.jpg" alt="Family on the beach" class="beach">
    </div>
    <div class="row color-block-top"></div>
  </div>

CSS

.color-block-top {
  background-color: rgb(36,54,138);
  padding: 1vh;
  min-width: 20em;
}
.block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: fill;
  width: 100%;
}
.beach {
  margin: 0;
  min-width: 100%;
  height: 500px;
  object-fit: cover;
  overflow: hidden;
}

您必须通过添加col作为row的子级来正确使用Bootstrap网格，然后您可以使用间距类实用程序，在本例中为px-0到container-fluid来删除其默认填充。

要移除排水沟，可以使用排水沟类实用程序将gx-0添加到row的

.color-block-top {
  background-color: rgb(36, 54, 138);
  height: 5vh
}
.beach {
  object-fit: cover;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid px-0">
  <div class="row gx-0 color-block-top"></div>
  <div class="row gx-0">
    <div class="col">
      <img src="https://picsum.photos/500" alt="Family on the beach" class="beach w-100 h-100 ">
    </div>
  </div>
  <div class="row gx-0  color-block-top"></div>
</div>

由于在使用引导程序片段和文档库时，通常不需要创建许多自己的样式类(如果有的话(，因此创建一个特殊的类来适应您的网格布局并不是一种罪过。你已经几个月没有问了，所以我猜你现在已经意识到了，但你永远不会知道！

你可以在你的头部和身体标签之间添加一个开合式标签(例如，如果高度设置为60%，则完全适合你的场景，因为这不是bootstrap中包含的身高百分比(。有时您不止一次地需要这个大小，这样就不必偶尔在HTML中给出一堆div长的类名列表。

这是这样添加的：

    <head>
    </head>
       <style>
       .h-60 {
          height: 60%
       }
       </style>

      <body>

或者；给定元素的父元素具有指定值，则将高度类设置为"0"；height:inherit；当它可用时也是一个不错的选择。父母的大小以绝对值(例如高度：50px(来定义；height:inherit；或"；高度：100%"；会对孩子有同样的行为。

相关内容

最新更新

热门标签：