圖像縮小與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的問題

回答

相關問題