Question

我在子div中有一些文档扫描图像。在父级div中，我定义了overflow: scroll。我想在用户单击扫描图像时创建放大功能。

在click事件上，此类应用于子元素：

.zoomIn {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

问题在于子div中的文档会缩放并沿边缘被裁剪。

如何保持文档的大小不变并使其可滚动？

[编辑]

很抱歉，我无法添加代码，因为所有这些元素都是从角度组件动态呈现到DOM中的。我尝试了您所有的建议，而且还是一样。
我注意到当我在单击上添加宽度时，它应该可以正常工作，但是它会从左上角缩放图像，增加宽度时是否可以从中心缩放图像？

Answer 1

我理解您有2个div，一个孩子和一个父孩子，并且您想单击该孩子并放大，您的问题是当您放大时，孩子的尺寸会变大并更改父母的尺寸，而您想让孩子变大而不改变父母的身材

选项1：
通过CSS更改为Overflow:auto;到父div

选项2：
将max-width:1100px;设置为父div，您可以选择px

Answer 2

可能是因为添加div类时图像和.zoomIn会缩放。

Original Problem - JSFiddle

可以使用img内置的滚动方法来解决此问题：

.parent {
  overflow: scroll;
  width: 100%;
  height: 100%;
}

.zoomIn {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);    
}

<img onclick="this.classList.add('zoomIn')" class="parent" src="http://4.bp.blogspot.com/-OHKK5CysDvM/TeYP-E9XaLI/AAAAAAAAAHw/wCimgXNWVCc/s1600/P3226278.jpg" />

JSFiddle

在div内缩放元素，并使溢出可滚动-HTML

2 个答案: