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的逻辑。所以由于图像总是会被拉伸，我们有两种可能：

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

你可能会注意到，我认为相对于 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>

两个 sn-p 都可以优化以减少冗余，但我保留它们是为了更好地解释不同的情况。