光标应位于 .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

使用transformcss 属性img

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>