html - Bootstrap 中的全高并排图像

Question

我想获得下图所示的结构。将有一个全宽和全高的容器，其中包含 2 张图像和其他元素。我的图像应该是全高(容器的高度)和容器内的自动宽度(分别从中心向左增长，向右增长)。我的问题是我的图像比容器高得多，我需要以某种方式将它们限制在容器内(红色区域)以填充它的整个高度。 PS.1 所有图片均为纵向模式，所有图片高度相同。 PS.2 我看了看 Stack 上的其他问题。 PS.3 你得到了here我的非工作示例。

欢迎提出任何建议。谢谢!

Answer 1

您可以为您想要的结果定义 flex 。 'justify-content' as center 将使您的图像居中，两边的边距相等。

附言。如果您希望覆盖整个 div，请为图片添加 50% 的宽度。

.container {
  width: 100%;
  background: lightgrey;
  height: 300px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.child {
  display: flex;
  width: 100%;
  justify-content: center;
  height: inherit;
}

#img1,
#img2 {
  height: 100%;
  align-items: stretch;
}

<div class="container">

  <div class="child">

    <img src="https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg" id="img1">


    <img src="https://s-media-cache-ak0.pinimg.com/736x/64/07/19/640719d42a8107720d760349fcfbbd52.jpg" id="img2">

  </div>

</div>