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

您应该像下面那样格式化代码：

<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上裁剪图像并以正确的高度上传图像？

Answer 2

您可以使用flexbox属性来实现您的目标，并将图像设置为背景。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: