内容溢出从父级背景照片容器（响应）

Question

我有3列的内容（使用引导），适合由背景父div。

在我的桌面屏幕上查看时，它看起来很好。

然而，当我开始缩小的视口的大小，3列自然崩溃成一个过，这是细的上方。

问题出现在他们现在在照片背景div之外。

什么是处理这种情况，所以列内容仍然在被叠加背景的正确方法。

Answer 1

看看下面的代码片段。在这里我试图模拟你的情况。你可以在不同的视口上试试这个。它应该解决你的问题。

.parent_img{ 
 
    background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg"); 
 
    background-size: 100% 100%; 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
} 
 

 
.child_img{ 
 
    width:90%; 
 
    height:20%; 
 
    border:5px solid yellow; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="row parent_img"> 
 
    <div class="col-md-4"><img class="child_img" src="http://free-realestate.org/english/material/039.png"></div> 
 
    <div class="col-md-4"><img class="child_img" src="http://orig12.deviantart.net/d095/f/2015/149/3/e/mockingjay__fight_me_____5356____commission_by_artisticjoker-d8v7qfl.png"></div> 
 
    <div class="col-md-4"><img class="child_img" src="http://i949.photobucket.com/albums/ad340/Toki_Graphix/Other/CS%20Sketches/Mayet.png"></div> 
 
    </div> 
 
</div>