it-swarm.com.ru

Растянуть изображение для полной загрузки контейнера

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

 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>

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

8
pocockn

Проверьте, решает ли это проблему:

<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 no-padding переопределит заполнение контейнера начальной загрузки по умолчанию.

Полный пример здесь .

18
sQer

В начальной загрузке 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-liquid применяет max-width: 100%; высота: авто ; "но img-Fluid не решает проблему и не добавляет вручную эти атрибуты стиля с классами начальной загрузки или без них в тег img.)

17
poikilos

Класс 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
Mehdi Dehghani

Прежде всего, если размер изображения меньше контейнера, то только класс img-Fluid не решит вашу проблему. Вы должны установить ширину изображения на 100%, для этого вы можете использовать Bootstrap class "w-100" . Имейте в виду, что классы container-liquid и col-12 устанавливают отступы влево и вправо в 15px и класс "row" по умолчанию устанавливают для левого и правого поля значение -15px . не забудьте установить их на 0.

Примечание: "Px-0" - это класс начальной загрузки, который устанавливает отступы влево и вправо в 0 и
"mx-0" - это класс начальной загрузки, который устанавливает для левого и правого поля значение 0 

Постскриптум Я использую версию Bootstrap 4.0. 

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>
0
user11023470