Изображения на мобильных устройствах

[lesenok87]

Добрый день, коллеги!
Возникла проблема, а как решить - не знаю. Очень надеюсь на вашу помощь )
Суть проблемы:
необходимо адаптировать изображения для нормального отображения как на мобильных устройствах, так и на десктопах. все было бы легко, если бы не присутствие в img событий onmouseout и onmouseover. Совсем не хочет с ними уменьшаться...
Уже пару дней гуглю решение, но пока ничего не срабатывает. Подскажите, пожалуйста, новичку решение )

[Naive]

Пример косяка в студию.
Не имею представления каким говнокодом возможно сотворить подобную проблему.

[lesenok87]

Вот такая у меня белиберда:

<div style="text-align: center; width: 100%; float: left;">
   <div style="float: left; width: 33%;">
      <p><img class="img-with-animation" data-delay="200" data-animation="fade-in" onmouseover="this.src='images/clothes/jacket1.jpg';" onmouseout="this.src='images/clothes/jacket.jpg';" src="images/clothes/jacket.jpg" /></p>
      <h3 style="font-size: 20px;">Пуховики и куртки</h3>
      <p class="price">300 руб.</p>
   </div>   
   <div style="float: left; width: 33%; vertical-align:top;">
      <p><img class="img-with-animation" data-delay="200" data-animation="fade-in" onmouseover="this.src='images/clothes/clothes1.jpg';" onmouseout="this.src='images/clothes/clothes.jpg';" src="images/clothes/clothes.jpg" /></p>
      <h3 style="font-size: 20px;">Личное бельё</h3>
      <p class="price">150 руб. - 6 кг</p>
      <p class="price">250 руб. - 12 кг</p>
   </div>
   <div style="float: left; width: 33%; vertical-align:top;">
      <p><img class="img-with-animation" data-delay="200" data-animation="fade-in" onmouseover="this.src='images/clothes/coveralls1.jpg';" onmouseout="this.src='images/clothes/coveralls.jpg';" src="images/clothes/coveralls.jpg" /></p>
      <h3 style="font-size: 20px;">Спецодежда</h3>
      <p class="price">300 руб.</p>
   </div>
</div>