Изображение не соответствует сетке, когда сетка сведена к минимуму.

Question

У меня есть изображение, у которого есть пространство, когда я смотрю на устройство с разрешением sm и xs, как это сделать с сеткой?

вот мой код

<div class="container"> 
    <div class="row"> 
    <div class="col-md-7"> 
    <img src="http://placehold.it/550x350" class="img-responsive"> 
    </div> 
    <div class="col-md-5"> 
    <h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2> 
    <p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p> 
    </div> 
</div> 
</div> 

из резолюции 991px to 581px я получаю пустое пространство с картинки (как это не соответствовало к сетке)

http://www.bootply.com/10CUN9fXqG#

Как это исправить ?

Answer 1

я бы просто добавить width: 100%; к изображению

Answer 2

Может быть, это будет ваш код решение:

<div class="container-fluid"> 

    <div class="row"> 
    <div class="col-md-7"> 
     <img src="http://placehold.it/550x350" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-md-5"> 
     <h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2> 
    <p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p> 
    </div> 
    </div> 
</div> 

Answer 3

Вы не используете самозагрузки classes для sm и xs экранов, используйте это как изменить img от max-width до width.

img{ 
    width :100%; 
} 

<div class="container"> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-7"> 
    <img src="http://placehold.it/550x350" class="img-responsive"> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-5"> 
    <h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2> 
    <p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p> 
</div> 

Answer 4

.img-responsive { 
    margin: 0 auto; 
} 

Попробуйте добавить пользовательский стиль