扩大边框正在改变子元素的大小答案

【问题标题】：Enlarging border is changing the size of child element扩大边框正在改变子元素的大小
【发布时间】：2018-01-19 00:33:04
【问题描述】：

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

基本上，父 div 具有圆角，因此图像看起来像一个圆圈。悬停时，边框从 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>

【问题讨论】：

下次你应该提供一个可行的例子jsbin.com/soqubawuqa/edit?html,css,output你确定它越来越小了吗？看起来只是创建了一个边框
您可以将边框设置为 7px，初始颜色为透明色
box-sizing:border-box 也是？
致 Paulie：box-sizing:border-box; 对父 div 无效。 To Temani：其实我的边框已经有点透明了。但我什至看不到任何透明度，因为下面的图像缩小了。因为我的背景是白色的，所以边框是 100% 白色
所以设置一个 7px 完全透明 边框 prehover 然后只需更改颜色...如建议的那样。问题解决了！ border: 7px solid rgba(255, 255, 255, 0);

标签： css

【解决方案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>

【讨论】：

感谢Huaganism，这正是我所需要的。我需要稍微调整一下，因为.border 的边框并不能完美地覆盖边框边缘的图像，但应该很容易做到。