我正在尝试缩放 div，但将内部元素保持在相同的位置 and 相同尺寸。为此，我使用transform: scale(value)在包装纸上和transform: scale(1/value)在内部 div 上。
问题是，当我改变比例时，内部 div 会发生变化。仅当包装器的宽度/高度为奇数或不完整时才会发生这种情况。对于均匀宽度/高度的包装纸来说，这种情况不会发生。
我的目标是让包装器的许多子元素与包装器一起缩放，但只有一个不这样做。
查看此示例以了解实际问题（将鼠标悬停在比例上）。
示例为no issue，内部元素保持固定在比例上（容器的高度和宽度均匀）：
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>示例为issue，内部元素按比例移动一点（容器的高度和宽度是奇数）：
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: 201px;
height: 201px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>无论容器的大小如何，如何解决此问题并避免我的元素按比例移动？
PS :上面使用的示例是一个非常简化的示例，用于显示问题，它不是所需的输出或使用的代码。因此，我们并不是在寻找另一种方法来实现上述相同的行为，因为这很容易做到
一开始我认为这与浏览器完成的计算和一些舍入有关，但这似乎是错误。我做了很多测试，无论我使用的秤的值如何，它总是失败odd value.
这是一个简单的例子，仅scaleX
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>如下所示，浏览器似乎向内部 div 添加了额外的像素，但是如果您仔细观察，内部 div 的大小是正确的，但是正在翻译中向右 1 像素。因此，开发工具的悬停块位置正确，但元素本身位置不正确！所以看起来浏览器正确地计算了位置但画错了。
如果我们简单地在容器上应用缩放，也会出现同样的问题。所以这不是因为内部元素的规模：
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box" style="transform:scaleX(2)">
<div class="inner">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner">A</div>
</div>
即使我们使用带有比例的浮点值，我们可以说存在一些路由和复杂的计算，我们也有偶数值的正确输出和奇数值的问题：
比例（1.25）和比例（1/1.25）的示例：
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>比例（1.33）和比例（1/1.33）的示例：
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>