如何实现鼠标移动到图片上图片焦点放

• 而不超过图片原来的大小，即固定范围，即使图片放大也不会超过规定的范围

<div id="">
    <img src="kefuweixin.jpg">
</div>

div {
    width: 200px;
    height: 200px;
    overflow: hidden;
}
img {
    width: 200px;
    height: 200px;
    transform: scale(2,2);
}

先给img一个div，，div盒子设置宽高，图片也设置同样的宽高，在用 transform: scale(,)设置你图片要放大的倍数，在对div设置 overflow: hidden;，对超出div宽高的进行裁剪，在给img价格过度效果就可以了呀