Здравствуйте!
Использую 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>
Саму верстку целиком можете посмотреть здесь(уже нельзя).
Спасибо.
На самом деле, у вас там нет картинки, это всего лишь отступ другого блока:
Блок этот вот:
И у него на картинке выше я отметил класс, который имеет цвет фона. Решить это можно вот так:
Другими словами, просто удалите тот класс, ijh
, из кода в своем style.css
, он вам не нужен, так как внутри блока с этим классом другие блоки уже имеют класс m_mid_tpl
, который точно также задает вам цвет фона со значением rgb(235, 235, 235)
.
В верстке на которую вы дали ссылку и изображение в топике - это не проблема респонсивного изображения бутстрапа . В ссылке на сайт вы применяете фоновый цвет к бутстраповской колонке .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>
Чтоб изображение не выходило за пределы блока, выставьте ему max-width;
img { max-width: 100%; }
Картинка в div
[body > div > div:nth-child(3) > div
], у него три класса (col-lg-12
, col-sm-12
, col-xs-12
), в которых прописано:
padding-right: 15px;
padding-left: 15px;
Сбросьте их у div
-контейнера.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Например для создания адаптивного изображения используется способ представленный ниже
Необходимо спрашивать юзера, уверен ли он в количестве потоков, которое ввел