css - 如何使CSS变换: Scale perform more like Zoom

Question

我有一个网站有一个“弹出”面板，允许您选择一个 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 不支持该属性，所以我听取了使用“Transform: scale(0.9) 的建议，它看起来很糟糕在所有设备上。

我似乎找不到使它看起来更像 Zoom 属性的方法，你知道我该怎么做吗？

Answer 1

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

对 parent 和 child 的改造..

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

对比

仅在父级上转换

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

fiddles 所需的 html 代码

.zoom {
  transform: scale(0.5);
}