內容溢出從父級背景照片容器（響應）

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>