相对于行宽

Question

我有一个带有背景图像的全宽度滑块。滑块高度根据图像响应，因此它始终显示100％的图像从屏幕的一侧到另一侧。

现在我试图将内容（文本）放在滑块内，使其位于内容网格内，并位于滑块的底部。

期望的结果：

问题是.medium-6 .columns高度为0像素，我无法将其内容置于底部。

CodePen：http://codepen.io/anon/pen/MaYOgQ

HTML：

<div class="slide">
  <div class="height-wrapper">
    <div class="row">
      <div class="columns small-6 small-offset-6">
        <div class="slider-content">
          <h2>Headline</h2>
          <p>Description text</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.slide {
  background-image: url('img/slider1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  max-height: 627px; /* img full size height */
}

.height-wrapper {
  display: block;
  padding-bottom: 35%; /* hack to always show full height of the image: (img height / img width) */
  width: 100%;
  height: 0;
}

.columns {
  position: relative;
}

.slider-content {
  position: absolute;
  left: 0;
  bottom: 10%;
}

/* The rest is standard Foundation grid code */

.row {
  margin: 0px auto;
  max-width: 62.5em;
  width: 100%;
}
.columns {
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  float: left;
}
.small-6 {width: 50%;}
.small-offset-6 {margin-left: 50% !important;}

Answer 1

您提到要将元素放在滑块中。我想这是一个JavaScript滑块，所以你不介意在JavaScript中完成定位。

脚本根据原始图像大小和用户窗口宽度计算滑动高度。然后它将计算出的高度设置为.height-wrapper元素。

更新了CodePen：http://codepen.io/anon/pen/VaEbOK

我将原始的Foundation Framework CSS和JS文件加载到Pen，因为您的Foundation网格摘录未完成。

JavaScript的：

// -- Set slider content HEIGHT --
$(window).on('resize', function() {
  var width = 1900; // Image width
  var height = 627; // Image height
  var slide_height = $(window).width() / (width / height);
  $(".height-wrapper").height(slide_height);
}).trigger('resize');

HTML：

<div class="slide">
  <div class="row">
    <div class="height-wrapper columns small-6 small-offset-6">
      <div class="slider-content">
        <h2>Headline</h2>
        <p>Description text</p>
      </div>
    </div>
  </div>
</div>

CSS：

.slide {
  background-image: url('http://placehold.it/1900x627');
  background-size: cover;
  background-repeat: no-repeat;
  max-height: 627px;  /* img full size height */
}

.height-wrapper {
  padding: 0; /* remove Foundation .columns padding */
}

.columns {
  position: relative;
  border: 1px solid blue;
}

.slider-content {
  border: 1px solid red;
  position: absolute;
  left: 0;
  bottom: 10%;
}

// + Foundation Framework