Prevenire un cambiamento di altezza quando si aggiunge un bordo con il ridimensionamento della scatola

Non riesco a trovare qualcosa che descriva questo problema, ma se mi manca, fammelo sapere.

Di seguito una demo (Testato in IE11 e Chrome) che mostra perfettamente il problema

In sostanza, sto cercando di aggiungere un bordo a un elemento e mantenere le dimensioni uguali. Funziona perfettamente per la larghezza, ma l’altezza, ne accoglie solo la metà, quindi ho un’altezza di 3px in più.

C’è un modo per prevenire questo / aggirarlo senza usare uno script? Posso apportare modifiche specificamente agli elementi che hanno il bordo, ma non conosco l’altezza effettiva (200px è usato qui solo per scopi dimostrativi , quindi la semplice riduzione dell’altezza non è un’opzione.

Grazie.

EDIT (Dal momento che apparentemente non è chiaro cosa sto chiedendo)

C’è un modo per impedire che l’altezza cambi senza usare uno script?

DEMO:

div { width: 200px; float: left; margin-right: 3px; } div img { max-width: 100%; max-height: 100%; } .div { border: 3px dotted blue; box-sizing: border-box; } 
 

Puoi impostare l’ line-height:0px aggiunta line-height:0px se non c’è testo per .div come l’immagine è elemento di inline-block interno che aggiunge spazio

 div { width: 200px; float: left; margin-right: 3px; } div img { max-width: 100%; max-height: 100%; } .div { border: 3px dotted blue; box-sizing: border-box; line-height:0px; } 
 

Ecco una variante di soluzione:

 div { width:200px; float:left; margin-right:3px; box-sizing:border-box; } .div img { max-width:100%; max-height:100%; box-sizing: border-box; border:3px dotted blue; } 

Aggiungi l’attributo line-height al div come suggerito da @Vitorino o aggiungi vertical-align: middle alla img . Entrambi risolveranno il problema dello spazio bianco per un inline-block

 div img { max-width: 100%; max-height: 100%; vertical-align: middle; } .div { border: 3px dotted blue; box-sizing: border-box; line-height:0px; }