css parâmetro width faz borda contornar div ao invés da imagem

Boa tarde galera,

Criei duas divs, uma pra o cabeçalho e outra para receber o conteúdo, então dei um espaço entre elas pra ficar um estilo diferente, mas ao jogar uma imagem jpg, de 16KB, de 400x400 px, apesar de ficar pequena dentro da div, ao chegar no ponto de configurar uma borda e ou box-shadown, essas duas se expandem e ficam do tamanho da área interna da div.

Quando coloco o parâmetro width e height em 100% cada, na minha "figure.img-exemp img {}" ao invés da borda se ajustar à imagem, acontece o contrário, a imagem expande, fica desfocada devido a baixa resolução e se ajusta à borda... o_O

O interessane é que se ajusto o width não surte nenhum efeito de diminuição, mas no caso do height, muda normalmente pra qualquer valor que eu atribuir.
Se puderem me dar uma dica fico muito grato.

Talvez alguém aqui já tenha passado pela mesma situação...
Desde já agradeço à todos. E me desculpe o tamanho do texto. A baixo segue meu código em questão: pertitente ao assunto

figure.efeito img {

 width: 100%;
 height: 100%;
}

figure.efeito figcaption {

 opacity: 0;
 position: absolute;
 top: 0px;
 background-color: rgba(0,0,0,.4);
 color: white;
 width: 100%;
 height: 100%;
 padding: 10px;
 box-sizing: border-box;
 transition: opacity 1s;
}

figure.efeito:hover figcaption {

 opacity: 1;
}