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

#css #html5 #вёрстка #bootstrap

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он соответствовал тематике «Stack Overflow на русском».
                        
                        Закрыт 2 года назад.
                                                                                
           
                
        
Здравствуйте!

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



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


  

    
  



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


  

    
Здесь будет расположен весь остальной контент.
  



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

Спасибо.
    

Ответы

Ответ 1

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


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



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



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


Ответ 2

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

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


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

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


  


    

      не правильно
    

    

      

        правильно
      
    

  



Ответ 3

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

img { max-width: 100%; }


Ответ 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-контейнера.


Ответ 5

Если изображене выходит за пределы блок, нужно родительскому блоку придать свойство: 

overflow: hidden;