Растянуть изображение, чтобы соответствовать полной ширины контейнера bootstrap

У меня есть изображение шириной 1300px, используя bootstrap я хочу, чтобы это изображение заполняло всю ширину моего контейнера, который установлен в 1300px. Я создаю строку, даю ей полные 12 столбцов, а затем добавляю изображение с классом Image responsive. С этой настройкой я получаю вывод ниже.

enter image description here

Я хочу, чтобы мой образ растягивался до того места, где мой образ находится в моем содержимом, вот мой код. 

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

изображение имеет значение width 100% поэтому не уверен, почему он не заполняет контейнер.

7
css html image twitter-bootstrap

3 ответов

проверьте, если это поможет вам

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

в CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

Css класс "без заполнения" переопределит заполнение контейнера начальной загрузки по умолчанию.

полный пример: https://jsfiddle.net/3hk9b1a2/

14

в bootstrap 4.1 класс w-100 требуется вместе с img-fluid для изображений меньше растягиваемой страницы:

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

см. закрытый выпуск:https://github.com/twbs/bootstrap/issues/20830

(по состоянию на 2018-04-20, документация неверна:https://getbootstrap.com/docs/4.1/content/images/ говорит, что img-fluid применяет max-width: 100%; height: auto; " но img-fluid не решает проблему, и ни вручную добавление этих атрибутов стиля с классами начальной загрузки или без них в тег img.)

11

container класс имеет 15px левое и правое заполнение, поэтому, если вы хотите удалить это заполнение, используйте следующее, потому что row класс имеет-15px левое и правое поле.

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

Codepen:http://codepen.io/m-dehghani/pen/jqeKgv

2