引导程序中的全高并排图像

Question

我想获得下图所示的结构。将有一个全宽和＆amp;高度容器内有2个图像和其他元素。我的图像应该是全高（容器的高度）和容器内的自动宽度（从中心到左边，分别到右边）。我的问题是我的图像比容器高得多，我需要限制它们以某种方式在容器内（红色区域）也填充它的整个高度。 PS.1所有图像均处于纵向模式，并且所有图像都具有相同的高度。 PS.2我看了Stack上的其他问题。 PS.3你得到here我的非工作范例。

欢迎任何建议。谢谢！

Answer 1

您可以为所需结果定义flex。 ＆＃39;证明内容＆＃39;因为中心会使图像以两边相等的边距居中。

PS。如果您想要覆盖整个div，请为图像添加50％的宽度。

＆＃13;

＆＃13;

class BackgroundJob
  def perform
    return if performed_today?
    JobRun.create!(performed_on: Date.today)
    # Perform the job here
  end

  private

  def performed_today?
    JobRun.where(performed_on: Date.today).exists?
  end
end

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

将容器流体和行设置为100％并删除“img-responsive”类。同时将图像设置为max-height：100％和max-width：100％

工作代码

    <div class="pop-us-container">
      <div class="container-fluid">
        <div class="row">
          <div id="pop-up-1" class="col-sm-6 text-right">
            <img src="http://lorempixel.com/1250/1730/">
          </div>
          <div id="pop-up-2" class="col-sm-6 text-left">
            <img src="http://lorempixel.com/1250/1730/">
          </div>
        </div>
      </div>
    </div>

CSS添加

img {
    max-height:100%;
    max-width:100%;
}
.container-fluid, .row {
    height: 100%;
} 

查看工作示例here。