一个大图像旁边的两个小对齐图像

Question

我正在为如何编写代码来创建两个垂直图像而苦苦挣扎，是否有可能在不减小宽度的情况下减小较大图像的高度？因为我需要把它放在col md-8上，你有什么想法吗？

这是我需要制作的图像。Click here

HTML代码

<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div

CSS代码

.img-big{ height: 100%;width: 100%; }

上面的代码是我用来制作图片2和3旁边的大图的代码。大图的尺寸是900x767。

Answer 1

您可以使用flexbox属性来实现所需内容，并将图像设置为背景。

​

body, html {
  margin: 0;
  padding: 0;
  color: white;
}

.container {
  height: 767px;
  display: flex;
}

.left {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 1;
}

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

.one {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 50%;
}

.two {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  background-size: cover;
  flex: 50%;

}

<div class="container">
  <div class="left">Left image</div>
  <div class="right">
    <div class="one">First image</div>
    <div class="two">Second image</div>
  </div>
</div>

​

Answer 2

您应该像下面这样设置代码的格式：

<div class="row">
    <div class="col-md-8">
        <img class="img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div> 
    </div>
    <div class="col-md-4">
         <img src="OTHER IMAGE"></div>
         <img src="OTHER IMAGE"></div>
    </div>
</div>

正如您在col-md-4中看到的底部的两个图像一样，如果您展开宽度100%，则下一个图像将落在下方。

您实际上不应该在类名称中同时包含row和col-md。(参见http://getbootstrap.com/css/)

关于减少高度而不是宽度，你不能在Paint或Photoshop上裁剪图像并上传具有正确高度的图像吗？