转换原点未实施

Question

尝试转换图像比例（缩放）但将其保持在其父级左侧和顶部 div 内，因此仅尝试将其向下和向右转换。设置转换原点似乎不起作用，我错过了什么？

以下代码在每次单击按钮时缩放图像，但将左侧和顶部推到父 div 之外。

 $('element').click(function{
   $('#element').css({'transform':'scale(' + scale + ')' });
   $('#element').css({'transform-orgin':'top left'});
})

<div style "max-wdith:1080px; height: 700px; overflow-x:scroll; overflow-y:scroll">
   <img id="element" src=" src="https://images.techhive.com/images/article/2017/03/castle_moat-100714623-large.jpg" " class="img-flud">
</div>

Answer 1

你可以试试下面的代码

var x = 400 + 'px';
var y = 300 + 'px';

$('#element').css({
    'transform-origin':         x + ' ' + y + ' 0px',
    '-webkit-transform-origin': x + ' ' + y + ' 0px'
});

Answer 2

更新答案！

const btn = document.querySelector('button');

function zoomIn(e) {
  const scale = 0.1;
  const img = document.querySelector('#my-image');
  $('#my-image').css({transformOrigin: "top left", transform: 'scale(' + scale + ')'});
}

btn.addEventListener('click', zoomIn);

div {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  overflow: hidden;
  float: left;
}

div > img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="my-image" src="https://images.techhive.com/images/article/2017/03/castle_moat-100714623-large.jpg" />
</div>
<button>Zoom In</button>