光标应位于 .click() 上的图像中心 [重复]

Question

我正在做这个小例子，我试图将图像置于光标的中心，基本上，当您单击时，光标应该位于图像的中心。 由于我是初学者，我真的不知道如何实现这一目标。 也许是通过使用$(".theImg").height 之类的东西，但我认为我做错了，因为它不起作用。也许我必须使用transform...

$(document.body).click(function(event) {
        x = event.pageX;
        y = event.pageY;
        console.log(x +", "+ y);
        console.log(('theImg').height);

        $(".paysage") .css({'position' : 'absolute', 'top': y, 'left' : x})
                      .prepend($('<img>',{  class:'theImg',
                                            src:'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'})) 
        $(".theImg").prev().remove();       
              
});

body{
  width: 100vw;
  height: 100vh
}

.theImg{
  width :20em;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "paysage"> </div>

Answer 1

在img 上使用transform css 属性

transform: translate(-50%, -50%)

$(document.body).click(function(event) {
  x = event.pageX;
  y = event.pageY;
  console.log(x + ", " + y);
  console.log(('theImg').height);

  $(".paysage").css({
      'position': 'absolute',
      'top': y,
      'left': x
    })
    .prepend($('<img>', {
      class: 'theImg',
      src: 'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'
    }))

  $(".theImg").prev().remove();
});

body {
  width: 100vw;
  height: 100vh
}

.theImg {
  width: 20em;
  height: auto;
  transform: translate(-50%, -50%)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="paysage"></div>

Answer 2

将此带有规则的选择器添加到您的 css：

.paysage {
  transform: translate(-50%, -50%);
}

有必要吗？

$(document.body).click(function(event) {
        x = event.pageX;
        y = event.pageY;
        console.log(x +", "+ y);
        console.log(('theImg').height);

        $(".paysage") .css({'position' : 'absolute', 'top': y, 'left' : x})
                      .prepend($('<img>',{  class:'theImg',
                                            src:'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'})) 
        $(".theImg").prev().remove();       
              
});

body{
  width: 100vw;
  height: 100vh
}

.theImg{
  width :20em;
  height: auto;
}

.paysage {
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "paysage"> </div>