javascript - 如何垂直居中固定位置的背景图像，该背景图像覆盖从视口(viewport)顶部偏移的容器？

Question

我需要将背景图像垂直居中，该图像具有固定的背景附件并且距顶部 100 像素。 background-size 设置为 cover，因此它水平居中背景图像，但不是垂直居中。

这是我的 HTML:

<div class="header">
  <h1>Header</h1>
</div>

<div class="container">
  <img src="http://i.imgur.com/LJubdtP.png">
</div>

<div class="crosshairs">
  <div class="xAxis"></div>
  <div class="yAxis"></div>
</div>

我的 CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.header {
  width: 100%;
  height: 100px;
  background-color: tan;
  position: fixed;
  top: 0;
}

.container {
    width: 100%;
    margin-top: 100px;
    height: calc(100vh - 100px);
  background-image: url('http://i.imgur.com/EvdsgOV.png');
    background-position: center 100px;
    background-attachment: fixed;
    background-size: cover;
  text-align: center;
  position: relative;
  z-index: 50;
}

.container img {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.crosshairs {
  width: 100%;
    margin-top: 100px;
    height: calc(100vh - 100px);
  position: absolute;
  top: 0;
}

.xAxis {
  width: 100%;
  height: 10px;
  background-color: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.yAxis {
  width: 10px;
  height: 100%;
  background-color: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

我的JS:

var backgroundImage = new Image();
backgroundImage.src = $('.container').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

backgroundImage.onload = function() {

  var object = $('.container');

  var bgImgWidth = this.width;
  var bgImgHeight = this.height;

  var imageRatio = bgImgWidth/bgImgHeight;
  var coverRatio = object.outerWidth()/object.outerHeight();

  if (imageRatio >= coverRatio) {
    /* The Height is our constant */
    var coverHeight = object.outerHeight();
    var scale = (coverHeight / bgImgHeight);
    var coverWidth = bgImgWidth * scale;
  } else {
    /* The Width is our constant */
    var coverWidth = object.outerWidth();
    var scale = (coverWidth / bgImgWidth);
    var coverHeight = bgImgHeight * scale;
  }
  var cover = coverWidth + 'px ' + coverHeight + 'px';
  //         alert('scale: ' + scale + ', width: ' + coverWidth + ', height: ' + coverHeight + ', cover property: ' + cover);

  var containerHeight = $('.container').height();
  var posFromTop = 100 + (containerHeight - coverHeight) * .5;
  console.log(coverHeight + ' coverHeight');
  console.log(containerHeight + ' containerHeight');
  console.log(posFromTop + ' posFromTop');
  $('.container').css('background-position', 'center ' + posFromTop + 'px');
};

如果视口(viewport)高度小于 300 像素，我可以正常工作，但如果高于 300 像素，它就不会给我正确的 coverHeight 值并且无法正常工作。

这是我的 fiddle :https://jsfiddle.net/LxuxeL58/1/

Answer 1

只需将其向下移动到标题高度的一半即可，无需任何 JS。