在 Bootstrap 3 的同一行调整两个图像的大小答案

【问题标题】：Resizing two images at the same line on Bootstrap 3在 Bootstrap 3 的同一行调整两个图像的大小
【发布时间】：2017-05-27 14:43:51
【问题描述】：

我正在尝试使用 Bootstrap 将两个图像放在同一行，使用两个不同的列。我对齐了它们，使用了一些背景颜色，然后查看结果，等等。

但是，当我更改分辨率以查看响应效果时，它们的大小不会相等！图像的宽度不同，但是是的，高度相同。有人猜到了吗？

这里是 HTML：

.coresq {
  background-color: #131313;
}

.cordir {
  background-color: #AAAAAA;
}

.top-shows {
  margin-left: 0;
  margin-right: 0;
}

.top-shows [class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}

<div class="container">
  <div class="row top-shows">
    <div class="col-xs-4 coresq ">
      <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-responsive"/>
    </div>
    <div class="col-xs-8 cordir">
      <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-responsive"/>
    </div>
  </div>
</div>

当显示缩小时，响应属性的大小不会相等。不应该吗？他们不是在同一条线上吗？

【问题讨论】：

图片分辨率是多少？
第一个有 203 X 51 第二个有 346X51
你可以试试这个Example 不同尺寸的图片 ;')

标签： html css image responsive

【解决方案1】：

您有两种不同的列大小。 col-xs-4 和 col-xs-8

如果您希望它们具有相同的宽度，则需要对两个图像使用相同的 solmn 大小。 col-xs-6 和 col-xs-6 将是您正在寻找的尺寸。

【讨论】：

【解决方案2】：

一张图片使用双列 (xs-8) 而不是另一张 (xs-4)，因此在调整大小时，较小的列会被占用。

Try resizing this external JSFIDDLE with equal cols

（另外，请确保图像与上面小提琴中的大小相同）

【讨论】：

是的，Syden，我离开了那个空间！而且，您的建议是有道理的，但是，行为不应该来自行吗？无论如何，用相等的列进行测试还行不通，因为图像的宽度不同，但高度相同。
是的，确实如此……最后一个疑问……调整大小的行为不应该由行来完成吗？我想像一个标签但是，正如我所看到的，网格是单独控制的......我是对的吗？

是的，您是，.row 用于创建水平列组。您设置的每个 .container>.row ，您都有 12 个网格列可供使用。调整大小本身由列处理，因此为什么使用 col-xs 或 col-md（在较小/较大视口的情况下使用不同的布局断点）。

如果此答案对您有所帮助，请考虑支持或纠正，谢谢。

【解决方案3】：

经过一些研究，我查看了可以做到的 Flex，并看到了新版本的 bootstrap（4，但仍处于 alpha 阶段）。我已经阅读了很多内容，并决定进行测试。有用！和我之前问的一模一样，代码改动不大。

嗯，自定义的css是一样的，但是Bootstrap是4（alpha，用于测试），HTML在这里：

<div class="container">


    <div class="d-flex flex-row">

      <div class="col-xs-4 coresq ">
        <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-fluid"/>
      </div>

      <div class="col-xs-8 cordir">
        <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-fluid"/>
      </div>

    </div>


  </div>
.

PS：我不知道为什么，但是 sn-p preview 上的代码正在剪切结束代码的最后一个 div。结束时只有一个点。

【讨论】：