css - CSS 的图像缩小问题

Question

我的 html5 页面中有一个 div，它是“元素”的容器。然后每个元素都有一个图像和一个数字。选择元素后，我将向已加载的 img 添加较粗的边框。但是，添加该边框会缩小图像允许的内部空间，因此在选择时它看起来会闪烁/跳跃/缩小。有没有一种技术或方法可以做到这一点，使图像保持相同的大小，但我可以给用户一个指示，它已被选中？现在，我正在根据选择更改边框宽度和边框颜色。

.projects_container{
  width: 100%;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  text-align: left;
  background-color: #fff;
}

.project {
  display: inline-block;
  position: relative;
  margin: 0;
  margin-right: 5px;
  width: 100px;
  height: 120px;
}

.project img{
  display: block;
  margin: 0;
  margin-bottom: 2px;
  width: 100px;
  height: 100px;
  border-style:solid;
  border-width: 0.5px;
  border-color: #000000;
  border-radius: 50px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
}

.project.toggle img{
  border-width: 3.0px;
  border-color: #ce7019;
}

<div class="project" id='project_button_1' ><a href='javascript:void(0)' onClick='showProject("1")'><img src='urlhere'></img><p>1</p></a></div>

Answer 1

为避免这种“跳跃”，您可以将 border 的值包含在 img 的固定尺寸内，属性为 box-sizing:border- box 但这会减小您的 img 的大小。

我将建议另一种使用 box-shadow 属性突出显示您的 img 的方法:

_{注意:为了查看示例，我已将您的代码更改为在悬停时工作}

.project {
  display: inline-block;
  position: relative;
  margin: 0;
  margin-right: 5px;
  width: 100px;
  height: 120px;
}
.project img {
  display: block;
  margin: 0;
  margin-bottom: 2px;
  width: 100px;
  height: 100px;
  border: solid 1px #000000;
  border-radius: 50%;
  transition:all 1s;
}
.project:hover img{
  border-color:red;
  box-shadow: 0 0 0 3px red;
}

<div class="project">
  <img src='http://placekitten.com/120'></img>
</div>