全高图片

问题描述

我目前正在建立一个网站，并且遇到了一些并排图像和文字的问题:

I am currently building a website and I am running into some issues with side by side images and text:

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

我连续有两列，一列用于内容，一列用于图像，它们位于页面的右侧.如您所见，内容已经位于容器的左侧.

I have two columns in a row, one for content and one for an image which would be located on the right hand side of the page. The content, as you can see, is already situated at the left side of the container.

我只是想知道如何使两列相等的高度.对于较大的屏幕尺寸，图像应完全填满高度，但是如果将两列折叠成较小的屏幕尺寸时彼此叠放，则可以接受.我怎样才能做到这一点?

I am just wondering how to make both columns of equal height. The image should completely fill the height for larger screen size, but it is certainly acceptable if the two columns stack over each other when collapsed to smaller screen sizes. How can I pull this off?

推荐答案

好的，因此，我提供了几种不同的方法可以实现此目的(取决于您实际寻找的方式，因为上面的屏幕快照是").

Alright, so I've provided a couple different ways that you could accomplish this (depending on which way you're actually looking for, since the screenshot above isn't super clear).

这是一个jsfiddle，显示了如果您希望图像保持适当的宽高比，该如何完成:

Here's a jsfiddle showing how this can be accomplished if you want your image to maintain the proper aspect ratio:

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

这是另一个jsfiddle，它显示了如果您希望图像始终伸展到显示器的整个高度怎么办?

And here's another jsfiddle showing how this can be accomplished if you want your image to always stretch to the full height of the monitor:

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

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

Basically, it uses the flex property to ensure that the two columns are always the same size. Then I've aligned them both vertically using align-items: center so the text will always be centered regardless of how tall the window gets.

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

如果您希望避免使用flex-box，我将在短期内使用display: table-cell提供最后一个示例.

I'll provide one final example shortly using display: table-cell, in case you're hoping to avoid flex-box.

如所承诺的那样，这是一种使用display: table-cell达到类似效果的方法.这是最受支持的解决方案，但需要做更多的工作.祝您好运，如果您有任何疑问，请告诉我:

as promised, here is a way to accomplish a similar effect using display: table-cell. This is the most supported solution, but requires a little more work. Good luck, let me know if you have any questions:

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

这篇关于全高图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！