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

убери второй .container. Вы не должны вкладывать контейнеры Bootstrap. .container-fluid пойдет на всю ширину.

— 10.04.2019 21:25

Нет, я не буду удалять второй контейнер... Мне нужно это, чтобы структурировать текстовый пост.

— 10.04.2019 21:25

html css twitter-bootstrap bootstrap-4

10.04.2019 21:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

263

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Я не могу добавить некоторые div с классом. Я могу изменить только CSS класса img embed_image.

— 12.04.2019 09:17

12.04.2019 00:31