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

Posted 2023-03-06

【中文标题】当浏览器放大或缩小时，如何保持绝对定位的元素响应？

【英文标题】：How can I keep an absolutely positioned element responsive when the browser is zoomed in or out?

【发布时间】：2021-07-19 05:39:25

【问题描述】：

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

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

【问题讨论】：

当您只想将函数引用传递给事件侦听器时，您会立即调用resizeTitles() ...$(window).resize(resizeTitles)，因此只有在事件发生时才会调用它

解决了问题！

【参考方案1】：

就像 charlietfl 在他们的评论中所说，问题在于我调用了 resizeTiles 而不是传入引用。

$(window).resize(resizeTitles)