如何让Toggle图标适配父Div，实现随Div同步缩放？

需求：让Toggle图标完全适配父Div容器，实现图标跟随Div尺寸变化同步缩放，调整为目标布局效果。

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
    <div class="menu btn5" data-menu="5">
      <div class="icon"></div>
    </div>
</div>

CSS

body {
  background-color: black;
}

.btn5 {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  transition-duration: 0.5s;
  border: 5px solid red;
  position: relative;
}

.btn5 .icon {
  transition-duration: 0.5s;
  position: absolute;
  height: 5%;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

.btn5 .icon:before,
.btn5 .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  content: "";
}

.btn5 .icon:before {
  top: -250%;
}

.btn5 .icon:after {
  top: 250%;
}

.btn5.open .icon:before {
  transform: rotateZ(-45deg) scaleX(0.75) translate(-25%, 0);
}

.btn5.open .icon:after {
  transform: rotateZ(45deg) scaleX(0.75) translate(-25%, 0);
}

.btn5:hover {
  cursor: pointer;
}

JavaScript

$(".menu").click(function () {
  $(this).toggleClass("open");
});

核心修改说明 #

• 使用百分比单位替代固定像素值，让图标元素的尺寸和间距基于父容器动态计算，实现同步缩放
• 通过transform: translate(-50%, -50%)将图标精准居中在父容器内，避免固定位置值导致的错位
• 统一汉堡线的尺寸比例，确保父容器尺寸变化时图标布局比例保持一致
• 优化切换状态的transform参数，保证缩放后动画效果仍能正常展示

内容的提问来源于stack exchange，提问作者Yasin Bekir Titiz