Выравнивание картинки по размеру блока

741
09 февраля 2017, 01:18

Здравствуйте!

Использую bootstrap для верстки. Как выравнять по ширине картинку с родительским блоком?

Картинка в этом блоке:

<div class="row">
  <div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
    <img src="/img/template/taxi_logo_02.jpg" alt="логотип" class="img-responsive">
  </div>
</div>

А за ним блок к контентом:

<div class="row">
  <div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12 ijh">
    <p>Здесь будет расположен весь остальной контент.</p>
  </div>
</div>

Саму верстку целиком можете посмотреть здесь(уже нельзя).

Спасибо.

Answer 1

На самом деле, у вас там нет картинки, это всего лишь отступ другого блока:

Блок этот вот:

И у него на картинке выше я отметил класс, который имеет цвет фона. Решить это можно вот так:

Другими словами, просто удалите тот класс, ijh, из кода в своем style.css, он вам не нужен, так как внутри блока с этим классом другие блоки уже имеют класс m_mid_tpl, который точно также задает вам цвет фона со значением rgb(235, 235, 235).

Answer 2

В верстке на которую вы дали ссылку и изображение в топике - это не проблема респонсивного изображения бутстрапа . В ссылке на сайт вы применяете фоновый цвет к бутстраповской колонке .col-- образующей сетку. У вас это стиль:

.ijh {
  background-color: rgb(235, 235, 235);
}

Этого делать не нужно, так как в колонке присутствуют паддинги, которые имеют обратные отступы из за родительского .row

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

<div class="container">
  <div class="row">
    <div class="col-12 ijh">
      не правильно
    </div>
    <div class="col-12">
      <div class="ijh">
        правильно
      </div>
    </div>
  </div>
</div>
Answer 3

Чтоб изображение не выходило за пределы блока, выставьте ему max-width;

img { max-width: 100%; }
Answer 4

Картинка в div [body > div > div:nth-child(3) > div], у него три класса (col-lg-12, col-sm-12, col-xs-12), в которых прописано:

padding-right: 15px;
padding-left: 15px;

Сбросьте их у div-контейнера.

READ ALSO
Адаптивное изображение

Адаптивное изображение

Например для создания адаптивного изображения используется способ представленный ниже

350
Подтверждение Y \ N

Подтверждение Y \ N

Необходимо спрашивать юзера, уверен ли он в количестве потоков, которое ввел

406
Программа не принимает русский ввод [дубликат]

Программа не принимает русский ввод [дубликат]

На данный вопрос уже ответили:

383
Как увеличить double? [дубликат]

Как увеличить double? [дубликат]

На данный вопрос уже ответили:

386