响应式全屏滑块中内容相对于行宽的绝对定位

Question

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

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

期望的结果：

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

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 中完成的定位。

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

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

我将原始的 Foundation Framework CSS 和 JS 文件加载到笔中，因为您的 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

响应式全屏滑块中内容相对于行宽的绝对定位

Absolute positioning of content in responsive full screen slider with respect to row width

slider

zurb-foundation