Bild verkleinern Problem mit CSS

Question

Ich habe ein div in meiner html5 Seite, die ein Container für "Projekte" ist. Jedes Projekt hat dann ein Bild und eine Zahl darin. Wenn das Projekt ausgewählt ist, füge ich dem geladenen Bild einen dickeren Rahmen hinzu. Durch Hinzufügen dieses Rahmens wird jedoch der für das Bild zulässige Innenraum verkleinert, sodass er bei Auswahl scheinbar blinkt/springt/schrumpft. Gibt es eine Technik oder eine Methode, dies zu tun, damit das Bild die gleiche Größe behält, aber ich dem Benutzer einen Hinweis geben kann, dass es ausgewählt worden ist? Im Moment ändere ich die Randbreite und die Randfarbe bei der Auswahl.

.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

Um zu vermeiden, dass „Sprung“ Sie box-sizing:border-box den Wert der border innerhalb der festen Abmessungen Ihres img mit der Eigenschaft enthalten können, aber das wird die Größe Ihres img verringern.

ich einen anderen Weg vorschlagen Ihre img mit dem box-shadow Eigenschaft hervorzuheben:

_{Hinweis: Um ein Beispiel zu sehen ich den Code geändert haben}

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

auf schweben arbeiten