全高图像

Question

我目前正在构建一个网站，但我遇到了一些并排图像和文本的问题：

<div class='banner' style='background-color: #efefef'>
  <div class='container-fluid'>

    <div class="row-fluid">

      <div class='col-sm-8'>
        <div class='inner'>
          <div class='title'>Travel Bezaff</div>
          <div class='subtitle'>Like nothing you've ever experienced</div>
          <div class="paragraph" style="text-align: center">
            From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions.
          </div>
        </div>
      </div>

      <div class='col-sm-4'></div>
    </div>

  </div>
</div>

我在一行中有两列，一列用于内容，另一列用于位于页面右侧的图像。如您所见，内容已经位于容器的左侧。

我只是想知道如何使两列高度相等。对于较大的屏幕尺寸，图像应该完全填满高度，但如果两列在折叠到较小的屏幕尺寸时相互堆叠，这当然是可以接受的。我怎样才能做到这一点？

Answer 1

好的，所以我提供了几种不同的方法来实现这一点（取决于您实际寻找的方法，因为上面的屏幕截图不是很清晰）。

这是一个 jsfiddle，展示了如果您希望图像保持适当的纵横比，如何实现这一点：

http://jsbin.com/xedijomuce/1/edit?css,output

这是另一个 jsfiddle，如果您希望图像始终拉伸到显示器的全高，如何实现这一点：

http://jsbin.com/nozagunoxo/1/edit?css,output

基本上，它使用flex 属性来确保两列的大小始终相同。然后我使用align-items: center 将它们垂直对齐，这样无论窗口有多高，文本都会始终居中。

.row-fluid {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

我将提供最后一个使用display: table-cell 的示例，以防您希望避免使用flex-box。

编辑：正如所承诺的，这是一种使用display: table-cell 实现类似效果的方法。这是最受支持的解决方案，但需要做更多的工作。祝你好运，如果您有任何问题，请告诉我：

http://jsbin.com/mifupiwexi/1/edit?css,output

Answer 2

以下是解决方案，如果有任何问题，请随时询问：-

我稍微更新了你的代码：-

<div class = 'banner' style = 'background-color: #efefef'>
            <div class = 'container-fluid'>

                <div class = "row-fluid">

                    <div class = 'col-sm-8' style="height:100px;">
                        <div class = 'inner'>
                            <div class = 'title'>Travel Bezaff</div>
                            <div class = 'subtitle'>Like nothing you've ever experienced</div>
                            <div class = "paragraph" style = "text-align: center">
                                From the bustling streets of Casablanca to the dynamic capital city of Rabat to the labryinth like medina of the old city of Fez, prepare yourself for a journey into one of the most culturally diverse regions.
                            </div>
                        </div>
                    </div>

                    <div class = 'col-sm-4' style="height:100px;">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="height:100%;">
</div>
                </div>

            </div>
        </div>

您只需将某个特定高度放在两列中，并将 100% 高度设置为图像。 例如-我在代码中添加了一个虚拟图像，您可以看到。