如何让CSS Transform动画及元素尺寸随屏幕宽度成比例适配？

黑色圆圈中心有一个红色小圆环，hover时圆环向圆圈右侧边缘移动。针对屏幕宽度调整场景，以下是两个问题的解决方案：

问题1：确保动画结束后红色圆环始终停在圆圈边缘的同一位置 #

原始代码使用固定em值作为平移距离，容器宽度变化时，固定距离会导致圆环无法精准对齐边缘。解决方案是用相对容器尺寸的动态计算值定义平移距离，结合CSS变量提升可维护性：

修改关键CSS代码 #

.image {
  margin: auto;
  width: 20%; /* 先定义图片相对容器的宽度，用于后续计算 */
  --image-width: 20%;
  transition: transform 1s ease-in-out; /* 现代浏览器无需兼容前缀 */
}

.image:hover {
  /* 平移距离 = 容器半宽 - 图片半宽，确保图片右侧与圆圈右侧对齐 */
  transform: translateX(calc(50% - calc(var(--image-width) / 2)));
}

原理：通过calc(50% - var(--image-width)/2)计算出从中心到右侧边缘的精准距离，该值会随容器宽度动态变化，无论屏幕如何缩放，圆环都能准确停在圆圈边缘。

问题2：让红色圆环尺寸与黑色圆圈成比例变化 #

原始图片使用固定像素尺寸，无法随黑色圆圈同步缩放。解决方案是将图片宽度设置为容器的百分比值，而非固定像素：

修改关键CSS代码 #

.image {
  margin: auto;
  width: 20%; /* 相对于容器宽度的比例，可根据需求调整 */
  transition: transform 1s ease-in-out;
}

原理：黑色圆圈宽度为容器的100%，容器宽度为屏幕的50%，将图片宽度设为容器的百分比后，图片会随容器（即黑色圆圈）的缩放同步变化，始终保持固定比例。

完整修改后的代码 #

CSS

.container {
  width: 50%;
  display: grid;
}

.a {
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: black;
  border-radius: 50%;
}

.image {
  margin: auto;
  width: 20%;
  --image-width: 20%;
  transition: transform 1s ease-in-out;
}

.image:hover {
  transform: translateX(calc(50% - calc(var(--image-width) / 2)));
}

.container > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

HTML

<div class='container'>
  <div class='a'></div>
  <img class='image' src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/200px-Red_circle.svg.png" alt="红色圆环">
</div>

内容的提问来源于stack exchange，提问作者one-hand-octopus