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

图像的顶部将与 div 的顶部相同，因此 top=0
图像的高度将比 div 长，顶部将隐藏因此 top<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 内，因此两种可能性是：

图像的顶部将与 div 的顶部相同，因此 top=0
图像的高度会变小，图像的顶部会可见因此 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>

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

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

jQuery calculate image background-position top position?

html

javascript

css

jquery

background-position