imagen estirada

[fersosa]

hola, tengo un nuevo problema.
en un div que a un lado tiene una imagen donde hacer click para que se despliegue otro div hacia abajo, dicha imagen se ve estirada. como lo soluciono?

Código HTML:

<div class="BoxTit">
  <span>Reseña Brecha</span>
  <img src="images/more.gif"
       id="btn01"
       class="btn"
       width="14"
       height="14"
       title="clic para expandir"
       alt="clic para expandir"
       onclick="SetBox('Cont01','btn01');"
  />
</div>
 

Código CSS:

div.BoxTit {
    margin: 0 auto;
    margin-top: 10px;
    left: 10px;
    width: 50%;
    height: 30%;
    background-color: gray;
    font-family: arial;
    font-size: 18px;
    text-align: left;
    color: white;
    letter-spacing: 3px;
    padding: 3px;
    opacity: 0.3;
}
div.BoxTit:hover {
  background-color: black;
  font-weight: bold;
  opacity: 0.8;
  border-bottom-color: white;
  border-width: 2px;
  border-style: solid;
} 
img.btn {
    width: 14px;
    height: 14px;
    float: right;
    padding: 3px;
    cursor: pointer;
}