当网格最小化时，图像不适合网格

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; 
} 

尝试添加自定义样式