1 回答

TA貢獻(xiàn)1856條經(jīng)驗 獲得超17個贊
使用transform
css 屬性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>

TA貢獻(xiàn)1816條經(jīng)驗 獲得超6個贊
將此帶有規(guī)則的選擇器添加到您的 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>
添加回答
舉報