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

Question

我在CSS中设置了居中的图片：

background-position: center center;

但是我想知道它在设置为中心后的顶级位置，我怎样才能用jQuery或普通的javaScript来计算呢？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

正如我上面评论的那样，我们需要找到公式，因此我们的想法是依靠:和background-position:center的逻辑。因此，由于图像将始终被拉伸，我们有两种可能性：

1. 图片的顶部与div的顶部相同，因此顶部= 0
2. 图片的高度将比div长，顶部将隐藏，因此顶部＆lt; 0



你可能会注意到我认为相对于div顶部的顶部位置是我的原点

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

以下是代码示例：

＆＃13;
＆＃13;
background-size:cover
＆＃13;
//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()
})
＆＃13;
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%;
}
＆＃13;
＆＃13;
＆＃13;

如果我们将包含视为背景大小的值，则图像将始终包含在div中，因此两种可能性为：

1. 图片的顶部将与div的顶部相同，因此 top = 0
2. 图像高度较小，图像顶部可见，因此顶部＆gt; 0



与上述相同，我们需要考虑不同的情况并计算图像的新高度。

以下是代码示例：

＆＃13;
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax3">
</div>
＆＃13;
//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()
})
＆＃13;
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%;
}
＆＃13;
＆＃13;
＆＃13;

两个代码段都可以进行优化，以减少冗余，但我保留了这些内容，以便更好地解释不同的情况。