根据 Zurb 基金会中的背景图像细节调整行高

Question

这个很难解释，所以我会尽力的。

就目前而言，我有一个包装器 div，它的背景是冰山图像。它的样式是背景图像的大小适合用户的屏幕。在该包装器 div 中，我有两个 .rows，每个包含一列。

现在是棘手的部分：我想要一排横跨水面，另一排横跨水底。 Here's a rough concept.

现在这些行被赋予了最小高度以匹配水平线，但是当用户调整屏幕大小或浏览器宽度与我的开发环境不同时，当然它不会工作。

现在，我怎样才能让这些行的高度与背景图片相匹配？我曾考虑过将图像分成两部分，但我认为必须有一种更足智多谋的方法。这是我正在使用的 CodePen：http://codepen.io/jwindeknecht/pen/qOqwPp

如果您可以提供任何建议或者我可以解决任何问题，请告诉我！谢谢

<div class="hero">
  <div class="row over">
    <div class="large-6 large-offset-6 columns">
      <div class="inside">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
  <div class="row under">
    <div class="large-6 large-offset-6 columns">
      <div class="inside">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
</div>

.hero {
  background: url(http://i.imgur.com/fdRuNIF.jpg) center top no-repeat;
  background-size: cover;
  min-width: 100%;

  div {
    display: table;

    .inside {
      display: table-cell;
      vertical-align: middle;
    }

  }

}

.over div { min-height: 275px; }
.under div { min-height: 275px; }

Answer 1

好的！我想通了。我知道图像的尺寸，所以我将行的 min-height 设置为图像宽度的一定百分比。

例如图片宽度为 1500 像素。仅覆盖 horizon 的行高 300 像素。因此该行的 min-height 设置为 20vw.

因此，无论背景图像宽度如何，由于使用 vw，行的高度都会匹配。这是一个钢笔示例：http://codepen.io/jwindeknecht/pen/RWyBGW

而且新代码很简单：

.over div { min-height: 275px; }

到

.over div { min-height: 20vh; }

根据 Zurb 基金会中的背景图像细节调整行高

Resize Row Heights Depending on Background Image Details in Zurb's Foundation

css

background-image

zurb-foundation