这个问题我之前也碰到过，核心原因是默认盒模型中，边框是在元素的content区域之外绘制的——当你hover时把边框从0px改成7px，父元素的总尺寸会变大，但图片设置的width:100%是基于父元素的content宽度，这部分宽度会被新增的边框挤压，自然就导致图片缩小了。

下面给你两个适配不同场景的解决方案：

方法1：用透明边框提前占位（无需修改HTML） #

这是最简单的方案，思路是提前预留边框的空间，hover时只改变边框颜色，不会改变元素的整体尺寸：

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  /* 初始用7px透明边框占住位置，避免hover时挤压内容 */
  border: 7px solid transparent;
  transition: all 0.4s;
}
.element:hover {
  /* hover时只修改边框颜色，尺寸不变 */
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.20);
}
.element img {
  width: 100%;
  display: block; /* 可选：去掉图片底部的默认空白间隙 */
}

这样修改后，图片的可用空间从一开始就是固定的，hover时不会被边框挤压，完美适配不同尺寸的容器。

方法2：新增内层容器分离功能（适合动态调整边框宽度） #

如果必须让边框从0开始动画（不想初始有透明边框），可以用两层容器拆分功能：外层负责边框和hover效果，内层专门裁剪图片：

修改后的HTML： #

<div class="element">
  <div class="img-wrapper">
    <a href="action"><img src="//myapp.s3-eu-west-1.amazonaws.com/image" alt="alt" /></a>
  </div>
</div>

对应的CSS： #

.element {
  position: absolute;
  border-radius: 50%;
  border: 0px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s;
}
.element:hover {
  border: 7px solid rgba(255, 255, 255, 0.4);
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.20);
}
.img-wrapper {
  border-radius: 50%;
  overflow: hidden;
}
.img-wrapper img {
  width: 100%;
  display: block;
}

外层.element的边框变化只会影响自身尺寸，不会波及内层的.img-wrapper，所以图片始终保持原有的显示大小。

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