Question

我有一个项目，其中有很多图像包含在div中设置这样的东西：

<div id="container" style="width:100%; height:100%">
    <div id="sub-container">
        <img class="image" src="1.png">
        <img class="image" src="2.png">
        .
        .
        .
        <img class="image" src="n.png">
    </div>
</div>

我正在尝试实现“缩放”功能，以查看来自不同距离的所有图像。

#sub-container{
    zoom: 0.9;    
}

完全符合我的要求（在Chrome中，只使用它），但它运行真的慢。

#sub-container{
    transform-origin: 0 0;
    transform: scale(0.9);    
}

运行速度非常快，但行为不符合我的要求，就像zoom的行为一样。

zoom使#sub-container保持父容器100％屏幕宽度的100％宽度。即使你缩小了。使所有图像正确包装到新的尺寸和新的可用空间。

但是，

转换会将#sub-container的大小调整为小于父容器的值。对我来说，尺寸关系实际上是什么并不明显。我需要手动将#sub-container调整为

宽度：在0.9比例下为111.3％
宽度：0.8分时为125.1％，

等

正确填充父容器。

有没有人知道如何让transform像zoom那样行事，或让zoom更快地运行？和/或弄清楚scale和width之间的关系应该是什么？或者甚至只是一个CSS技巧，让#sub-container按照我想要的方式行事？

谢谢！

模拟Chrome的缩放与CSS变换比例（）

0 个答案: