Question

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

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

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;。

EDIT2：以下是所需的结果（仅当图像处于最大分辨率且没有缩放时才有效。大图像或较小的浏览器窗口会产生上面列出的问题）

Answer 1

我删除了你的包装＆＃34; row-inner＆＃34;从您的代码，因为它导致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小提琴：https://jsfiddle.net/dncwdvkq/

引导程序img-responsive不能缩放到父

1 个答案: