使用css scale属性缩放后可以看到完整图像

我想通过双击或缩小来缩放图像。逻辑工作正常，并且正在放大。我正在分配 CSS scale属性可以说：

transform: scale(2)

问题是在那之后，我再也看不到完整图像，它被剪切了。如何解决？我尝试在缩放时操纵元素的宽度和高度，但是它也不起作用。溢出也不起作用。下面的例子：

变焦前

缩放后：

https://jsfiddle.net/nzb4avm0/ Fiddle to test