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

Question

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

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

但是，当我开始缩小视口大小时，3列自然会折叠成一个高于一个，这很好。

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

处理这种情况的正确方法是什么，以便列内容仍有背景覆盖。

Answer 1

查看以下代码段。在这里，我试图模拟你的情况。您可以在不同的视口上尝试此操作。它应该可以解决你的问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;