【问题标题】:Wide image on Bootstrap containerBootstrap 容器上的宽图像
【发布时间】:2019-04-12 06:31:02
【问题描述】:

我想在 Bootstrap 容器上放一个宽幅图像。

<div class="container-fluid">
    <div class="container">
        <img data-layout="wide" src="big-image.jpg" alt="Big image" class="embedded_image">
    </div>
</div>

我希望从容器中出来的图像从右向左扩展。我没有办法为源图像添加额外的类,但我只能通过.embedded_image[data-layout="wide"]添加 CSS

我试过这个 CSS 代码:

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 1000%;
width: auto;

【问题讨论】:

  • 删除第二个.container。您不应该嵌套 Bootstrap 容器。 .container-fluid 将全宽。
  • 不,我不会删除第二个容器...我需要这个来构建文本帖子。

标签: html css twitter-bootstrap bootstrap-4


【解决方案1】:

嵌套 Bootstrap 容器是不好的做法,而且很可能没有必要实现您想要的页面布局。

但是,这里有一个解决方案,假设您希望保持容器不变。要将图像以container 居中,您可以将其包装在父级div 中并将justify-content: center 应用于父级。然后,您可以设置图像的最大宽度以确保它不会比container-fluid 更宽。 object-fit: contain 将确保保留纵横比。

请注意,我为 containercontainer-fluid 添加了彩色轮廓以用于说明目的。

.container-fluid {
  outline: solid blue 2px;
}

.container {
  outline: solid red 2px;
}

.image-container {
  display: flex;
  justify-content: center;
}

.embedded_image[data-layout="wide"] {
  object-fit: contain;
  max-width: 97vw;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
    <div class="container">
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/700x100/666" alt="Big image" class="embedded_image">
      </div>
      <br/>
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/300x100/666" alt="Big image" class="embedded_image">
      </div>
      <br/>
      <div class="image-container">
        <img data-layout="wide" src="https://place-hold.it/900x100/666" alt="Big image" class="embedded_image">
      </div>
    </div>
</div>

【讨论】:

  • 我无法在类中添加一些 div。我只能修改 embedded_image img 类的 CSS。
猜你喜欢
  • 1970-01-01
  • 2017-11-13
  • 2014-10-18
  • 2018-02-14
  • 2017-03-30
  • 2015-01-04
  • 1970-01-01
  • 2016-03-29
  • 1970-01-01
相关资源
最近更新 更多