Картинку уменьшить при сжимание - Вопросы по CSS

Проблема следующая, пытаюсь прикрутить анимацию при наведение на картинку все работает, но не могу задать ширину и высоту картинки авто.

Подскажи как сделать пожалуйста
 

вот код

<div  class="example5">
<img src="" class="smile1" /img>
<img src="" class="smile2" /img>
</div>

<style>
div.example5 {
max-width: 100%;
height: auto;

margin: 0 auto;
  /*Убираем полосу прокрутки*/
  overflow:hidden;
}
div.example5 img {
  position: absolute;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.example5 img.smile1 {
  opacity:0;
  filter:alpha(opacity=0);
}
.example5:hover img.smile1 {
  opacity:1;
  filter:alpha(opacity=100);
}
.example5:hover img.smile2, .example5 img.smile2:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
.example5 img.smile1, .example5:hover img.smile1 {
  margin-left: 0px;
}
.example5:hover img.smile2 {
  margin-left: 220px;
}
.example5 img.smile1 {
  margin-left: -220px;
}
</style>

Относительно чего ты хочешь одинаковую ширину и высоту картинок, они все должны быть одинаковы или что?