css - 扩大边框正在改变子元素的大小

Question

我正在尝试在个人资料照片悬停时创建动画。

基本上，父级 div 具有圆 Angular ，因此图像看起来像一个圆圈。将其悬停时，边框从 0px 增加到 7px。问题是位于子 div 内的图像正在缩小，因为我已将其宽度设置为 100%。

我无法为图片设置固定宽度，因为无论图片大小，图片都必须填满 div。

有办法解决这个问题吗？

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid rgba(255, 255, 255, 0.4);
}

.element:hover {
  transition: all 0.4s;
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.20);
  border: 7px solid rgba(255, 255, 255, 0.4);
}

.element img {
  width: 100%;
}

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

Answer 1

这是一个示例，说明您可以如何完成您想要的。我删除了一些不相关的样式以使其更简单。

无需使用 element 的边框，您只需要在 element 内部创建另一个边框并使用它来为悬停设置动画，这样您的图像就不会一开始很小，悬停时不会改变大小

https://jsfiddle.net/py04y4x1/2/

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid transparent;
}

.element:hover .border {
  transition: all 0.4s;
  border: 7px solid red;
}

.element img {
  width: 100%;
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 7px solid transparent;
  border-radius: 50%;
}

HTML

<div class="element">
  <div class="border"></div>
  <a href="action"><img src="https://lh3.googleusercontent.com/VT-PqxMMsA2wPy7kzmuKGDIzaA3AGuXKExqnfOfwTEy5AvLIMTranbfNGheRr457RD4=w300" alt="alt" /></a>
</div>