Nano Hash - криптовалюты, майнинг, программирование

Bootstrap помещает img на фон на всю ширину окна под сеткой с динамической высотой

Я пытаюсь разместить фоновое изображение, чтобы оно соответствовало всей ширине страницы и поддерживало содержимое сетки начальной загрузки (не фиксированной высоты), в то время как мой контейнер имеет фиксированную ширину.

Я пытался использовать 2 подхода:

  • Как фоновый URL
  • Как элемент img с абсолютной позицией и шириной 100%

В первом варианте img не покрывает весь контент, а во втором варианте img не поддерживает динамическую высоту.

Есть ли способ добиться того, чего я хочу, или это просто невозможно, когда класс .container имеет фиксированную ширину? Есть ли способ лучше?

Пример планкера

/* Styles go here */

.container {
  width: 300px;
  text-align: center;
  color: white;
}
.myImg {
  background: url('http://data.whicdn.com/images/10274608/large.jpg');
  background-size: cover;
  width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="myImg">
      <div class="row">
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
      </div>
    </div>
  </div>

  <hr/>

  <div class="container">
    <img class="myRegularImg" src="http://data.whicdn.com/images/10274608/large.jpg" style='position: absolute;  width:100%;  left:0px;' />

    <div class="row" style="position:relative">
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>

    </div>


  </div>
</body>

</html>

html css twitter-bootstrap background
16.08.2016

  • Это не дубликат - stackoverflow.com/questions/28565976/, поскольку он не поддерживает переменную высоту, а только фиксированную высоту. 16.08.2016
  • Почему вы не используете единицы измерения vh (высота области просмотра) и vw (ширина области просмотра)? Это относительные единицы для адаптивного макета. 16.08.2016
  • Потому что контент динамический @TeutaKoraqi 16.08.2016
  • Они изменяют размер в зависимости от области просмотра. Я не думаю, что они доставят вам проблемы. 16.08.2016
  • Да, но мне не нужен процент области просмотра, я хочу, чтобы изображение покрывало весь текст. Текст может состоять из 3 или 10 строк, я хочу, чтобы фон растягивался, чтобы покрыть весь текст, независимо от области просмотра @TeutaKoraqi 16.08.2016
  • Вы не можете получить фоновое изображение полной ширины, контейнер cus имеет фиксированную ширину, но создайте еще один div и еще один контейнер для добавления этого div. Дайте этому div полную ширину и добавьте фоновое изображение 16.08.2016
  • Можете ли вы отменить дубликат? это не тот же вопрос @Paulie_D 16.08.2016
  • Это дубликат, и ответ поддерживает динамические высоты. Демо имеет фиксированную высоту только для демонстрационных целей. 16.08.2016
  • @ZivWeissman, ищите что-то вроде этого: jsfiddle.net/BfLAh/2948 16.08.2016
  • codepen.io/Paulie-D/pen/VjRjYK 16.08.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..