纯css实现鼠标点击放大效果，并且保持外部容器大小不变

在前端开发中，经常会需要设置鼠标悬停放大图片，移开后图片还原的效果。一般我们通过scale来进行图片放大，但是放大后，会发现外部容器也会跟着放大，如何使内部图片在放大的同时保持外部容的尺寸不变？请参考以下代码：

HTML部分

<div class="zoompic">
    <img src="xxx.png" alt="">
</div>

CSS部分（LESS格式）

.zoompic {
    position: relative;
    display: inline-block;
    overflow: hidden;
    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.2s ease-out;
    }
    &:hover img {
        transform: scale(1.2);
    }
}