Question

这很难解释，所以我会尽我所能。

现在，我有一个包装器div，它具有冰山图像作为它的背景。它的风格是背景图像大小适合用户的屏幕。在那个包装器div中，我有两个.row，每个包含一列。

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

现在这些行的最小高度与该地平线相匹配，但是当用户调整屏幕大小或浏览器宽度与我的开发环境不同时，当然它的工作方式不同。

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

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

 if(getResources().getInteger(R.integer.orientation) == 0){
     setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  }else{
     setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  }

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

Answer 1

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

e.g。图像宽度为1500px。仅覆盖地平线的行高300px。因此，行的 min-height 设置为 20vw 。

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

新代码很简单：

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

到

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

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

1 个答案: