CSS不等图像高度

Question

我有一个不同宽度的3列网格，每个网格都包含一个图像元素。

结构基本上是

<div class="row">
    <div class="col-3"><img></div>
    <div class="col-6"><img></div>
    <div class="col-3"><img></div>
</div>

每张图片都设置为：

img {
  display:block;
  max-width: 100%;
  height: auto;
}

每列还包含15px的左侧填充和右侧填充;

但是，这会导致中间的 col-6 列高于行中的其他两列。

我已经尝试将 col-6 列的时间加倍左右填充，但我认为这不是理想的，也不会起作用。

我也试过使用flexbox无济于事。

保持所有图像高度相同且仍能正常工作的最佳解决方案是什么？

Answer 1

我理解它的方式，在中间栏的中心有一个逻辑排水沟。 col-6 不正好是col-3宽度的两倍。相反，它是宽度加上两倍的装订线宽度（有两个col-3而不是col-6）。

这个额外的宽度意味着如果您只是采用col-3图像的尺寸然后加倍宽度，则图像必须增长以适应稍宽的空间。这就是它进一步发展的原因。

所以，不要太担心CSS。只需使用正确尺寸的图像。

Answer 2

为什么不使用这些图片作为你的div的背景？作为背景，您可以使用cover，这些图片不会影响div的大小。

如果它没有帮助，请创建一个让我和你一起测试的傻瓜。

.div-with-bg {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 3

这是由于引导网格中图像的命题大小调整。它有三种可能的解决方案。

1. 通过裁剪使图像大小等于bootstrap网格大小。（因此 col-6 中的图像应为（col-3）* 2 + 30px（gutter size））。
2. 在高度和宽度固定的div中使用背景图像。
3. 使用动态图像裁剪库使其大小相等。