使用 Bootstrap 进行图像定位答案

【问题标题】：Image positioning using Bootstrap使用 Bootstrap 进行图像定位
【发布时间】：2016-06-22 17:11:29
【问题描述】：

我的代码有问题，我不知道我将在哪里或用什么来解决问题。

它显示了我的代码和我想要的样子

如您所见，与我想要的图像相比，上面的图像并不紧密。我怎样才能使下面的图片有任何想法？

这是我的代码

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>

【问题讨论】：

为什么将图像设置为背景图像而不是 img 元素？如果您想这样做，则需要为这些元素指定高度和宽度，否则它们将被视为 0，这就是您看不到它们的原因。
您必须在元素上设置高度和宽度，如果它们像您的示例中那样为空。
哦，真的吗？你能给我举个例子吗？让我试试
只需将高度和宽度添加到您的 .img-small1 类中，看看它是否显示出来
没有效果的人。如果您有其他选择，请尝试其他一些东西，请告诉我：D

标签： html css twitter twitter-bootstrap-3

【解决方案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>

【讨论】：

我将在哪里声明高度？我尝试了图像本身，但没有效果。关于 img-container 和 img-small 的 css 是否没有覆盖任何元素以适合图像？它给左边的滚动条我怎么能摆脱它？
这样做时无需定义高度。图片的高度决定了包含元素的高度。