图像缩小与CSS的问题

我有一个div在我的html5页面是“项目”的容器。每个项目都有一个图像和一个数字。当选择该项目时，我为我加载的img添加了较粗的边框。但是，添加边框会缩小图像所允许的内部空间，以便在选中时显示为闪烁/跳转/缩小。有没有一种技术或一种方法来做到这一点，使图像保持相同的大小，但我可以给用户指示它已被选中？现在，我将在选择时更改边框宽度和边框颜色。图像缩小与CSS的问题

.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>

来源

2016-10-10 Carey Richardson

看起来你的示例代码缺少一些东西。控制台给出“错误{”消息“：”未捕获的ReferenceError：showProject未定义“...}” – henry

为了避免“跳”，你可以包括你的img的固定尺寸内border与财产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>

工作

来源

2016-10-10 16:17:22 DaniP

图像缩小与CSS的问题

回答

相关问题