如何调整CSS按钮尺寸并适配内部图像？用变量统一控制大小

解决这个问题最直接的方式是用**CSS自定义属性（变量）**来统一管理按钮的基础尺寸，所有内部元素的尺寸、位置都基于这个变量动态计算，只需要修改一个变量值，就能同步调整按钮及内部所有相关元素的适配效果。

具体实现步骤： #

1. 定义核心尺寸变量：在按钮的样式容器中定义一个整数变量（比如--btn-size），用来控制按钮的基础宽高。
2. 绑定按钮基础尺寸：将.btn的width和height设置为这个变量的值。
3. 动态计算内部元素属性：内部的.part1、.part2的宽高、位置、边框半径等属性，全部通过calc()基于--btn-size计算，确保比例和位置始终适配按钮尺寸。

完整代码示例： #

<button class="btn">
  <span class="part1"></span>
  <span class="part2"></span>
</button>

<style>
.btn {
  /* 修改这里的数值即可同步调整所有相关元素 */
  --btn-size: 64px;
  
  width: var(--btn-size);
  height: var(--btn-size);
  border: none;
  border-radius: calc(var(--btn-size) * 0.125);
  background: #2563eb;
  position: relative;
  cursor: pointer;
}

.btn.fullscreen {
  border-radius: 0;
}

.part1 {
  position: absolute;
  width: calc(var(--btn-size) * 0.4);
  height: calc(var(--btn-size) * 0.4);
  top: calc(var(--btn-size) * 0.2);
  left: calc(var(--btn-size) * 0.2);
  border: calc(var(--btn-size) * 0.075) solid #fff;
  border-radius: calc(var(--btn-size) * 0.1);
}

.part2 {
  position: absolute;
  width: calc(var(--btn-size) * 0.3);
  height: calc(var(--btn-size) * 0.3);
  bottom: calc(var(--btn-size) * 0.2);
  right: calc(var(--btn-size) * 0.2);
  background: #fff;
  border-radius: calc(var(--btn-size) * 0.05);
}
</style>

<script>
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  btn.classList.toggle('fullscreen');
});
</script>

关键说明： #

• 所有依赖按钮尺寸的属性都通过var(--btn-size)结合calc()计算，比如边框半径、内部元素的宽高和定位偏移，都是基于基础尺寸的比例值。
• 想要修改按钮尺寸时，只需要修改.btn中的--btn-size值（比如改成44px），内部的.part1、.part2会自动适配新的尺寸，不会出现显示异常。
• 如果需要调整内部元素的比例，只需要修改calc()中的系数即可，比如把.part1的宽度系数从0.4改成0.5，就能让它占按钮宽度的50%。

内容的提问来源于stack exchange，提问作者Daniel Lip