覆盖相对于文本的图像位置

Question

我正在设置文本以重叠图像，但位置应在所有屏幕尺寸上保持相同。

实施例：

以下是我尝试demo

的示例

.c-txt-on-img{
      position: relative;
    }
    .c-txt-on-img .txt{
      font-size: 30px;
      font-weight: bold;
      font-family: arial, sans-serif;
      max-width: 200px;
      position: absolute;
      top: 80px;
      left: 158px;
    }
    .c-txt-on-img .img {
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: center center;
    }

    <div class="c-txt-on-img">
      <div class="txt">Tony where are you !!!!</div>
      <div class="img" style="background-image: url(http://theprojectstagingserver.com/stackoverflow/txt-on-img/comic.jpg)"></div>
    </div>

它仅适用于特定的屏幕尺寸，我可以使用不同的媒体查询在不同尺寸上修复此问题，但这将花费太多时间！

Answer 1

有两个主要挑战：

1）将图像和文本对齐以始终保持在同一位置。

2）对齐会在顶部/底部留下额外的不均匀空间。图像的左/右侧，因此我们需要增加图像大小以覆盖整个屏幕。

对于第一部分，我们可以将相同的左上角位置定义为文本和图像，然后为图像提供负的平移百分比，以便图像的左上角原点与文本气泡相同。

接下来，我们可以计算出图像的右/左/上/下的空间。增加宽度直到没有负空间。

下面是一张GIF图片，可以更好地解释这一点：

以下是DEMO

var viewportOffset = [],
    winWidth,
    winHeight,
    inLoop = false,
    resizeTimeout;

$(function(){
  init();
});

$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
      init();
    }, 500);
});

function init() {
  winWidth = $(window).width();
  winHeight = $(window).height();
  inLoop = false;
  coverImage();
}

function coverImage() {
  $('.js-cover-img').each(function (i) {

      viewportOffset[i] = getViewportOffset($(this));

    if(!inLoop){
      $(this).width('auto');
      $(this).height('auto');
    }

    var imgWidth = $(this).width();
    var imgHeight = $(this).height();

    viewportOffset[i].right = winWidth - imgWidth- (viewportOffset[i].left);
    viewportOffset[i].bot = winHeight - imgHeight- (viewportOffset[i].top);

    if(viewportOffset[i].top < 0){
      var vertViewportOffest = viewportOffset[i].bot;
    }else if(viewportOffset[i].bot <= 0){
      var vertViewportOffest = viewportOffset[i].top;
    }else{
      var vertViewportOffest = viewportOffset[i].top + viewportOffset[i].bot;
    }

    if(viewportOffset[i].right < 0){
      var horViewportOffest = viewportOffset[i].left;
    }else if(viewportOffset[i].left < 0){
      var horViewportOffest = viewportOffset[i].right;
    }else{
      var horViewportOffest = viewportOffset[i].left + viewportOffset[i].right;
    }

    if(horViewportOffest > 0 || vertViewportOffest > 0){
      $(this).width(imgWidth + 20);
      inLoop = true;
      coverImage();
      return false;
    }
  });
}

/* Get's the viewport position */
function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset();
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop
  };
}

body, html{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.c-txt-on-img {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.c-txt-on-img .txt {
  font-size: 30px;
  font-weight: bold;
  font-family: arial, sans-serif;
  max-width: 200px;
  position: absolute;
  top: 30%;
  left: 30%;
  z-index: 2;
  transform: translate(-50%, -50%);
  text-align: center;
}

.c-txt-on-img .img {
    transform: translate(-28.5%, -23%);
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 30%;
    min-width: 870px;
}
.c-txt-on-img img{
  display:block;
  width: 100%;
}

<script
  src="https://code.jquery.com/jquery-1.12.2.min.js"
  integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="
  crossorigin="anonymous"></script>

<div class="c-txt-on-img">
  <div class="txt">Tony where are you !!!!</div>
  <div class="img js-cover-img">
    <img src="http://theprojectstagingserver.com/stackoverflow/txt-on-img/comic.jpg">
  </div>
</div>