Широкое изображение на контейнере 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>

Я бы хотел, чтобы изображение выходило из контейнера и расширялось справа налево. У меня нет возможности добавить дополнительный класс к исходному изображению, но я могу добавить CSS только через .embedded_image[data-layout="wide"]

Я попробовал этот код 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>