Cursor should be at the center of the image on .click()

Question

I'm making this little exemple where I'm trying to center an image to the cursor, basically, when you click, the cursor should be at the center of the image. Since I'm a beginner, I don't really see how I could achieve that. Maybe it's by using something like $(".theImg").height but I think I'm doing this wrong since it doesn't work. Maybe I have to use a 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>

score 2 · Accepted Answer · answered Nov 21 '20 at 12:03

Using transform css property on 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>

It was this simple haha. Thanks for the help and also for reformating my code! — Aurore, Nov 21 '20 at 12:06

score 1 · Answer 2 · answered Nov 21 '20 at 12:06

Add this selector with rule to your css:

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

Was it necessary?

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

Yes, sometimes easy questions seem difficult at first glance :) I was glad to help! — s.kuznetsov, Nov 21 '20 at 12:09

Cursor should be at the center of the image on .click()

2 Answers2