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>

Bootstrap容器上的宽图像

1 个答案: