时间戳

首页 > 解决方案 > Bootstrap 容器上的宽图像

html - Bootstrap 容器上的宽图像

问题描述

我想要 Bootstrap 容器上的宽图像。

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

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

我试过这个CSS代码：

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

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

嵌套 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>

推荐阅读