getBoundingClientRect не коректная работа с zoom [закрыт]

154

30 сентября 2019, 03:40

<div style="transform: scale(2)">
  <img style="transform: translate(24.375px, 76.375px) scale(1)"></img>
<div>

Когда я прошу getBoundingClientRect у img то left right top bottom возвращаются некорректные данные то есть при движении картинки в право left right уменьшаются (тоже и с top bottom). Хотя если убрать с div transform то все работает корректно.

Answer 1

Насколько я понимаю, вы делаете zoom для картинки. Может вам подойдет такой вариант

function zoom(image) { 
  image.addEventListener('mousemove', function(e) { 
    var x = (e.offsetX / this.offsetWidth) * 100; 
    var y = (e.offsetY / this.offsetHeight) * 100; 
    this.style.backgroundPosition = x + '% ' + y + '%'; 
  }); 
} 
 
zoom(document.querySelector('figure'));

div { 
  width: 250px; 
} 
 
figure { 
  background-image: url(http://www.freedigitalphotos.net/images/img/homepage/golf-1-top-82328.jpg); 
  background-position: 50% 50%; 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  margin: 0; 
  cursor: pointer; 
} 
 
img { 
  transition: opacity .5s; 
  display: block; 
  width: 100%; 
  opacity: 1; 
} 
 
img:hover { 
  opacity: 0; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div> 
  <figure> 
    <img src="http://www.freedigitalphotos.net/images/img/homepage/golf-1-top-82328.jpg" /> 
  </figure> 
</div>