圖像縮小，而點擊它們

Question

我有一個簡單的圖像，我點擊圖像添加css邊框3px，但問題是，當我點擊活動類是好的，但圖像縮小了一下，它看起來像尺寸標識不同，

看起來就像圖像是縮小一點點，但寬度和高度是一樣的

我想保持形象，甚至對主動模式

的3px的邊框

li img { 
 
     cursor: pointer; 
 
     border-radius: 4px; 
 
     box-shadow: 0 3px 10px rgba(0,0,0,0.3); 
 
    } 
 
    
 
    li .active img { 
 
     border: 3px solid #01b9d1; 
 
     border-radius: 6px; 
 
     cursor: default; 
 
    } 
 
    .overview { 
 
     width: 140px; 
 
     height: 77px; 
 
    }

<div> 
 
     <a> 
 
     <img class="overview" src="imgsrc"> 
 
     </a> 
 
    </div>

Answer 1

使用大綱風格的CSS屬性到位邊境..
http://www.w3schools.com/css/css_outline.asp

Answer 2

img元素添加box-sizing: border-box。使用border-box使寬度和高度屬性（和最小/最大屬性）包括內容，填充和邊框，請檢查source。

例如

li img { 
    cursor: pointer; 
    border-radius: 4px; 
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); 
    box-sizing: border-box; 
} 

見fiddle