使用Bootstrap进行图像定位

Question

我的代码出了问题我不知道在哪里或者我会用什么来解决这个问题。

它显示了我的代码看起来像什么以及我希望看起来像什么

正如您所看到的，我想看到的图像上的图像并不紧密。我怎么能让下面的图片有任何想法？

这是我的代码

CSS

.img-container {
 height: 500px;
 display: flex;
 }

.img-big {
 background-image: url('/assets/icons/people-crowd-child-kid-large.jpg');
 background-size: cover;
 flex: 1;
 }

.img-small {
 display: flex;
 flex-direction: column;
 flex: 0 0 50%;
 }

.img-small1 {
 background-image: url('/assets/icons/13-Cuidados-alternativos-en-     familia.jpg');
 background-size: cover;
 flex: 50%;
 }

.img-small2 {
 background-image: url('/assets/icons/man-person-cute-young-large.jpg');
 background-size: cover;
 flex: 50%;
 }

HTML

<div class="row">
<div class="col-md-8 img-container">
    <div class="img-big img-responsive"></div> 
</div>
<div class="col-md-4 img-small">
     <div class="img-small1"></div>
     <div class="img-small2"></div>
</div>

Answer 1

不是将图像设置为背景图像，而是将它们设置为img元素：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-8 img-container">
    <img class="img-responsive" src="http://placehold.it/1000x500" />
  </div>
  <div class="col-md-4 img-small">
     <img class="img-responsive" src="http://placehold.it/250x250" />
     <img class="img-responsive" src="http://placehold.it/250x250" />
  </div>
</div>