Question

我的客户希望将三张图片放在一个简单的布局中，该布局在移动设备上完美运行：

http://www.boutiquebeautyaberdeen.com/img/mobile.png

在桌面尺寸上，它们只有几个像素。

http://www.boutiquebeautyaberdeen.com/img/desktop.png

（Stack Overflow不会让我发布图片）

      <div class="row">
        <div class="col-xs-6 col-lg-6">
           <img src="http://placehold.it/300x200" class="img-responsive"><br>
           <img src="http://placehold.it/300x200" class="img-responsive">
        </div>
        <div class="col-xs-6 col-lg-6">
           <img src="http://placehold.it/300x425" class="img-responsive">
        </div>
      </div>

我通过反复试验达到了图像的高度（425）。

这只是我对引导网格系统缺乏了解吗？或者我应该使用像flexbox这样的东西来实现这个目标吗？

Answer 1

由于舍入错误，可能会发生这种情况。由于列的宽度不是300像素，因此图像会缩小。这是按像素方式对图像的宽度进行的，高度根据图像的纵横比进行调整。因此，如果您的图像具有不同的宽高比，则无法保证缩放版本最终会达到匹配的高度。

示例

宽高比为1：3的图像将为每个像素的宽度缩放3个像素。

图像宽度纵横比1：2将为每个像素的宽度仅缩放2个像素。

因此，如果将列的宽度对齐，那么将列的宽度更改为一个像素会使得结果高度不同。

如果您的布局不稳定，那么您无法做很多事情。如果它是静态的，您可以将列宽调整为与给定宽高比匹配的值。另一种选择可能是调整左侧图像之间的边距，以便添加缺失的像素。

Answer 2

这似乎是数学四舍五入的问题。由于图像是为移动而缩放的，因此必须将部分像素值渲染为整个像素。

http://jsfiddle.net/isherwood/ut4w64q8

required code that's not really code

Bootstrap Grid - 图像未在不同的断点处对齐

2 个答案: