css 如何在屏幕 Bootstrap 的整个宽度上拉伸图像

j8ag8udp 于 2023-04-13 发布在 Bootstrap

关注(0)|答案(2)|浏览(269)

我绞尽脑汁想弄清楚如何使用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;
}

css

来源：https://stackoverflow.com/questions/73086067/how-to-stretch-image-across-full-width-of-screen-bootstrap

2条答案

按热度按时间

kuuvgm7e1#

您必须正确使用Bootstrap grid，将col添加为row的子元素，然后可以使用spacing class utilities（在本例中为px-0到container-fluid）来删除它的默认填充。
要删除排水沟，可以使用gutters class utilities将gx-0添加到row s

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

赞(0）回复(0）举报 2023-04-13

vwkv1x7d2#

由于在使用bootstrap snippets和docs library的时候，你通常也不需要创建很多你自己的样式类，所以创建一个特殊的类来适应你的网格布局并不是一种罪过。自从你问了几个月以来，我猜你现在已经意识到了这一点，但你永远不会知道！
你可以在head和body标签之间添加一个开始和结束的样式标签（例如，如果height设置为60%将非常适合你的场景，因为这不是bootstrap中包含的高度百分比）。有时你需要不止一次地使用这个大小，这样就可以方便地不必偶尔在HTML中给予一堆div长的类名列表。
这是这样添加的：

<head>

    </head>

       <style>

       .h-60 {
          height: 60%
       }

       </style>

      <body>

或者;给定元素的父元素具有指定的值，将height类设置为“height：inherit”也是一个很好的选项。父级的大小以绝对值定义（例如height：50 px），然后“高度：继承“或”高度：“100%”对孩子也会有同样的行为。

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何在屏幕 Bootstrap 的整个宽度上拉伸图像

2条答案

相关问题

热门标签

最新问答