当浏览器放大或缩小时，如何让绝对定位的元素保持响应？

Question

我有一张 header 图片，我在其右下角添加了标题和副标题。使用 jQuery，它们的位置会在 window 调整大小时做出响应，但在放大或缩小时不会。我听说 window 调整大小事件可以在某些浏览器上放大或缩小时触发，但似乎并非如此。我该如何解决这个问题？

HTML

<img src='images/header-photo.png' id='image'>
<div id='title-container'>
    <h1 id='title' class='title-text'>Title</h1>
    <img src='images/logo.png' class='logo-img'>
</div>
<h2 id='subtitle'>Subtitle</h2>

CSS

#title-container {
 display: flex;
 flex-direction: row;
 position: absolute;
}

#title {
  font-size: 2em;
  margin-right: 0.5em;
}

#subtitle {
  position: absolute;
}

#title-container,
#subtitle {
  width: fit-content;
}

#image {
  display: block;
  margin: auto;
  max-width: 100vw;
}

Javascript

$(document).ready(function(){
  let titleLeft=()=>((parseFloat($('#image').css('margin-left')) + parseFloat($('#image').width())) * 0.65).toString().concat('px')
  let titleTop=()=>((parseFloat($('#image').css('margin-top')) + parseFloat($('#image').height())) * 0.6).toString().concat('px')
  let subtitleLeft=()=>((parseFloat(titleLeft())* 1.1).toString().concat('px'))
  let subtitleTop=()=>((parseFloat(titleTop())* 1.2).toString().concat('px'))

  $('#title-container').css({'left': titleLeft(), 'top': titleTop()})
  $('#subtitle').css({'left': subtitleLeft(), 'top': subtitleTop()})
  
  let resizeTitles=()=>{
    $('#title-container').css({'left': titleLeft(), 'top': titleTop()})
    $('#subtitle').css({'left': subtitleLeft(), 'top': subtitleTop()})
  }

  $(window).resize(resizeTitles())
})

Answer 1

正如 charlietfl 在他们的评论中所说，问题是我调用了 resizeTiles 而不是传递引用。

$(window).resize(resizeTitles)

当浏览器放大或缩小时，如何让绝对定位的元素保持响应？

How can I keep an absolutely positioned element responsive when the browser is zoomed in or out?

html

javascript

css

jquery

responsive-design