html - Bootstrap img-responsive 不缩放到父级

Question

我正在尝试使用 Bootstrap img-responsive 类让一些图像在它们的父容器中响应式缩放，但进展不顺利。在这种情况下，我想在屏幕上以网格模式显示 2 到 4 个图像，并让图像在其父 div 内响应。

问题是图像不会随着 img-container 类缩小。

https://jsfiddle.net/fcLv3750/2/

HTML

<div class="container-fluid">


  <div class="row">
    <div class="row-inner">
      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>

      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="row-inner">
      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>

      </div>
      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>
    </div>
  </div>


</div>

CSS

.row-container {
  background-color: red;
  padding: 5px;
  max-height: 50%;
  height: auto;
}

.img-container {
  padding: 4px;
  max-height: 100%;
  border: 5px;
  border-color: black;
  border-style: solid;
}

.col-sm-6 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-inner {
  background-color: orange;
  height: 50vh;   //I want the page contents to resize based on browser window height (no scrolling)
  width: auto;
}

注意:以下将使图像变得响应式，但它通过使 img-container 成为行的全高而脱离了网格，我不想这样做。 (我不希望 img-container 高度为 100%)

https://jsfiddle.net/bm83ts0p/2/

.img-container {
  padding: 4px;
  height: 100%;   //changed from max-height:100%
  border: 5px;
  border-color: black;
  border-style: solid;
}

img{
 max-height: 100%
}

A) 是什么导致 img-responsive 类被忽略？
B) 我该怎么做才能使图像响应，并且 img-container div 不是 100% 高度。

编辑:一个关键特性是内容可以根据浏览器窗口调整大小而无需滚动，因此 height: 50vh; 用于 2 行中的每一行。

EDIT2:这是期望的结果(仅当图像处于最大分辨率且没有缩放时才有效。大图像或较小的浏览器窗口会产生上面列出的问题)

Answer 1

我已经从您的代码中删除了包装器“row-inner”，因为它会导致 clearfix 问题。主要是原因。

HTML:

<div class="container-fluid">


  <div class="row">

      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>

      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>

  </div>


  <div class="row">

      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>

      </div>
      <div class="col-sm-6">
        <div class="img-container">
          <img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
        </div>
      </div>

  </div>


</div>

Boostrap 网格中的列紧跟在行之后。例如 row>col 以避免任何类型的 clearfix 问题。希望对您有所帮助。

JS fiddle :https://jsfiddle.net/dncwdvkq/