如何使 CSS Transform: Scale 表现得更像 Zoom

【问题标题】：How to make CSS Transform: Scale perform more like Zoom如何使 CSS Transform: Scale 表现得更像 Zoom
【发布时间】：2016-08-24 20:25:24
【问题描述】：

我有一个网站，它有一个“弹出”面板，允许您选择一个 html 模板。在此阶段，它们会显示得更小，以改善用户体验。

这是我的选择器。

    .panel-overlay .panel-inner .section-preview
    {
        display: block;
        width: 100%;
        margin-bottom: 50px;
        border: 1px solid black;
        cursor: pointer;
        zoom: 0.2;
    }

使用已弃用的“缩放：0.2；”属性看起来完全正确

但是我不能使用它，因为在 iPad 上它根本不缩放模板，IOS 不支持该属性，所以我建议使用“转换：缩放（0.9），它看起来很糟糕在所有设备上。

我似乎找不到办法让这个看起来更像 Zoom 属性，你知道我该怎么做吗？

【问题讨论】：

标签： css zooming transform

【解决方案1】：

您是否仅将转换应用于父元素？

改变父母和孩子..

https://jsfiddle.net/Hastig/bz6eLwr3/1/

仅在父级上转换

https://jsfiddle.net/Hastig/bz6eLwr3/3/

小提琴所需的 html 代码

.zoom {
  transform: scale(0.5);
}

【讨论】：

我已经尝试将它应用到两者上，除非你在 div 中真正拥有内容，否则它似乎很棒。当您应用 transform: scale 到任何东西时，它会自己思考并垂直居中，没有任何样式暗示原因。它似乎也无法判断缩放时里面的内容有多大。我试图在 jsFiddle 中重新创建我的示例，但它过于复杂 - 太多的标记、图像和样式使其无法远程关闭。
我可以想象，有很多不完美的行为需要在每个浏览器上进行不同的修正。我唯一的建议是重写它以响应，如果它还没有，并避免transform: scale。