javascript - jQuery 计算图像背景位置的顶部位置？

Question

我在 CSS 中将我的图片设置为居中:

background-position: center center;

但我现在想知道它设置为中心后的顶部位置，我如何使用 jQuery 或纯 javaScript 计算它？

.parallax3 {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://picsum.photos/g/200/600');
  height: 100%;
}

.tagline {
    font-size: 2.5vw;
    letter-spacing:0.05em;
    padding: 25% 25%;
}

.grid-x {
    border:1px solid red;
}

.cell {
    border: 1px solid blue;
}

<div class="row widescreen">

  <div class="grid-container full">
    <div class="grid-x grid-padding-x align-stretch small-padding-collapse">
      <div class="medium-6 cell">
        <div class="tagline text-center">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="medium-6 cell parallax-viewport">
        <div class="parallax3">
        </div>
      </div>
    </div>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

有什么想法吗？

Answer 1

正如我上面评论的，我们需要找到公式，所以思路是依赖于background-position:center和background-size:cover的逻辑。所以由于图像总是会被拉伸(stretch)，我们有两种可能性:

1. 图像的顶部将与 div 的顶部相同，因此 top=0
2. 图像的高度将比 div 长，顶部将被隐藏，因此顶部<0

正如您可能注意到的那样，我考虑了相对于 div 顶部的顶部位置，这是我的原点

现在我们需要考虑图像如何覆盖 div 的所有不同情况，并根据每种情况计算图像的新高度。

这是一个代码示例:

//am using fixed values because they are known in this case, so this need to also be calculated
var him = 600;
var wim = 200;
var ratio = him / wim;
/*--*/

function get_top() {
  var h = $('.parallax3').height();
  var w = $('.parallax3').width();

  var diffh = h - him;
  var diffw = w - wim;
  if (diffw > 0 && diffh > 0) {
    //the image is smaller than the div so it should get bigger by at least the max difference
    if (diffh > diffw*ratio) {
      //both height will be equal here so top position = 0
      console.log(0);
    } else {
      //height of image will be bigger so top position < 0
      var newH = (wim + diffw) * ratio;
      console.log((h - newH) / 2)
    }
  } else if (diffw > 0) {
    //only the width if div is bigger so the image width will stretch and the height will be bigger and top < 0;
    var newH = (wim + diffw) * ratio;
    console.log((h - newH) / 2)
  } else if (diffh > 0) {
    //only the height is bigger so the image height will stretch and both heights will be equal to div and top = 0
    console.log(0);
  } else {
    // the image is bigger in this case so we do same logic as the start with abs value but we will reduce size so we consider the lowest value
    if (Math.abs(diffh) < Math.abs(diffw)*ratio) {
      //both height will be equal here so top position = 0
      console.log(0);
    } else {
      //height of image will remain bigger so top position < 0
      var newH = (wim + diffw) * ratio;
      console.log((h - newH) / 2)
    }

  }
}

get_top();

$(window).resize(function() {
  get_top()
})

body {
  height: 100vh;
}

.parallax3 {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:url('https://picsum.photos/g/200/600');
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax3">
</div>

如果我们将 contain 视为 background-size 中的值，则图像将始终包含在 div 中，因此两种可能性是:

1. 图像的顶部将与 div 的顶部相同，因此 top=0
2. 图像的高度会变小，图像的顶部将可见，因此 top>0

同上，我们需要考虑不同的情况，计算新的图片高度。

这是一个代码示例:

//am using fixed values because they are known in this case, so this need to also be calculated
var him = 600;
var wim = 200;
var ratio = him / wim;
/*--*/

function get_top() {
  var h = $('.parallax3').height();
  var w = $('.parallax3').width();
  var diffh = h - him;
  var diffw = w - wim;
  if (diffw > 0 && diffh > 0) {
    //the image is smaller than the div so it should get bigger by at least the min difference
    if (diffh < diffw*ratio) {
      //both height will be equal here so top position = 0
      console.log(0);
    } else {
      //height of image will be bigger so top position < 0
      var newH = (wim + diffw) * ratio;
      console.log((h - newH) / 2)
    }
  } else if (diffw > 0) {
    //only the width if div is bigger so the image height need to be reduced and both height will be equal
    console.log(0);

  } else if (diffh > 0) {
    //only the height is bigger so the image width will be reduced 
    var newH = (wim + diffw) * ratio;
    console.log((h - newH) / 2);
  } else {
    // the image is bigger in this case so we do same logic as the start with abs value but we will reduce size so we consider the biggest value
    if (Math.abs(diffh) > Math.abs(diffw)*ratio) {
      //both height will be equal here so top position = 0
      console.log(0);
    } else {
      //height of image will be bigger so top position < 0
      var newH = (wim + diffw) * ratio;
      console.log((h - newH) / 2)
    }

  }
}

get_top();

$(window).resize(function() {
  get_top()
})

body {
  height: 100vh;
}

.parallax3 {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('https://picsum.photos/g/200/600');
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax3">
</div>

这两个片段都可以进行优化以减少冗余，但我将它们保持这样以更好地解释不同的情况。