如何垂直固定覆盖从视口顶部偏移的容器的固定位置背景图像的中心？

Question

I need to vertically center a background-image that has a background-attachment of fixed on it and is 100px from the top. The background-size is set to cover so it is horizontally centering the background-image, but it is not centered vertically.

Here is my 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>

My 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%);
}

My 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');
};

I got it working if the viewport is less than 300px tall, but if it is taller than that, it does not give me the correct coverHeight value and does not work.

Here is my fiddle: https://jsfiddle.net/LxuxeL58/1/

Answer 1

只需将其仅向下降低标题的一半高度即可使用，而无需使用任何JS。

Answer 2

From your code, it appears the error is within the .outerWidth() and .outerHeight() functions.

Another possible source of error could be in the use of the "this" keyword, as it always refers to the caller of the function which could (possibly) be the window object in this case.

I would suggest using Element.getBoundingClientRect() for width / height / position in calculations - but that's purely based on personal experience and not necessarily factual best-usage information.