带有自举的响应式图像 - 两个图像对齐

Question

我有以下带有bootstrap 3的HTML代码：

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div id="test-header" class="row">
        <div class="col-md-12">
          <p><span class="label label-default"><span aria-hidden="true" class="glyphicon glyphicon-star"></span> Parts <span aria-hidden="true" class="glyphicon glyphicon-star"></span></span></p>
        </div>
      </div>
      <div id="test-body" class="row">
        <div class="col-xs-4 col-md-3"> <img alt="Image1" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
        <div class="col-xs-4 col-md-3"> <img alt="Image2" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
      </div>
    </div>
  </div>
</div>

链接：https://jsfiddle.net/DTcHh/20090/

我希望这有点不同：两个图像应该以某种方式属于一起（不应该在单独的cols中），但如果屏幕变小则应该响应。

如果我将第二行更改为以下代码，我的问题是图像在小屏幕上垂直对齐，我想避免这种情况。

<div id="test-body" class="row">
  <div class="col-md-12"> <img alt="Image1" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> <img alt="Image2" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
</div>

所以我想要的是拥有第二个例子，但是当屏幕尺寸缩小时，我希望缩小图像，而不是垂直对齐。

修改

以下是我想要获得的图片：

在大屏幕上：

在小屏幕上：

Answer 1

你的意思是这样的吗？

img {
  width: 50%;
  float: left;
}

WORKING FIDDLE

Answer 2

你需要将分区分成两部分。 你的div必须是这样的

<div class="col-xs-6 col-md-6"> <img src="img.jpg"/> </div> <div class="col-xs-6 col-md-6"> <img src="img.jpg"/> </div>

然后将您的图片width设置为100%

查看此演示https://jsfiddle.net/DTcHh/20098/