时间戳

首页 > 解决方案 > 如何使 CSS 转换：缩放在 Chrome 上正常工作？

css - 如何使 CSS 转换：缩放在 Chrome 上正常工作？

问题描述

您好，我transform: scale在 CSS 中使用时遇到问题。

我正在尝试按比例（200）缩放 1px*1px 块。我假设这个块最终会是 200px*200px。在 Firefox 中就是这种情况，但在 Chrome 中却不是这样。

#wrap {
  position: absolute;
  left: 200px;
  top: 200px;
}
#a {
  width: 1px;
  height: 1px;
  transform: scale(200);
  background-color: blue;
}
<div id="wrap">
  <div id="a">A</div>
</div>

Chrome devtools 显示正确的大小，但块的大小不正确。

我正在使用 225% 的 Windows 显示缩放选项window.devicePixelRatio = 2.25。我之所以提到这一点，是因为看起来尺寸之间存在 25% 的差异。此外，当我将窗口缩放比例设置为 200% 时，块显示的大小正确。

Devtools 突出显示正确的大小

标签： cssgoogle-chrometransformscale

解决方案

推荐阅读