当放大其父元素时，如何将子元素的比例可视地反转为未转换

问题描述

假设您有一个页面（黄色背景），其中的一个元素（灰线）带有一个子元素（红色虚线）；所有相同的像素尺寸。灰色的父级将放大到1.5，这自然会使它的子级也放大。为了将孩子的大小明显地反转为1.0，我将孩子的比例设置为0.5。我希望孩子在视觉上可以还原为非变换的1.0，但事实并非如此。如果我将孩子的比例尺增加到0.66，则它似乎未按预期进行转换。这里有什么逻辑可适用吗？在父元素放大时以编程方式反转子元素的比例？谢谢！

#region,#scaled-up,#scaled-down {
  position: relative;
  width: 200px;
  height: 100px;
}
#region {
  background-color: yellow;
  margin: 50px auto;
}
#scaled-up {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
#scaled-down {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
#scaled-up::before,#scaled-down::before {
  content: '';
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
#scaled-up::before {
  border: 2px solid grey;
}
#scaled-down::before {
  border: 2px dotted red;
}

<div id="region">
  <div id="scaled-up">
    <div id="scaled-down"></div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）