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>

CSS的图像缩小问题

1 个答案: