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

Question

我想获得图像波纹管中示例的结构。将会有一个完整的宽度为&的高度容器，里面有2个图像和其他元素。我的图像应该是全高（容器的高度）和容器内的自动宽度（从中心到左边，分别向右）。我的问题是我的图像比容器高很多，我需要限制它们在容器内部（红色区域）以填充容器的整个高度。 PS.1所有图像都是肖像模式，并且它们都具有相同的高度。 PS.2我看了一下关于Stack的其他问题。 PS.3你得到了here我的非工作例子。

欢迎任何建议。谢谢！

Answer 1

您可以为所需的结果定义flex。 'justify-content'作为中心将以相等的边距在两边对齐图片。

PS。如果要覆盖整个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>

Answer 2

置容器中，液体和行高度为100％和删除类 “IMG响应”。还设置了图像最大高度：100％，最大宽度：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。