Bootstrap 容器上的宽图像

Question

我想在 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;

Answer 1

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

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

请注意，我为 container 和 container-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>