Changer d'image au survol de la souris en étant responsive

Bonsoir,

Voilà quelques heures que je tournicote mes codes dans tous les sens à coups de "aaahhhhhh mais ouiiiii ça, ça va marcher"... et en fait non.
Cette fois ci je demande de l'aide :-)

J'ai des images que j'aimerais changer au survol. Jusque là, fastoche.
Mais j'aimerais que mon site soit responsive (en général je met toutes mes dimensions en %ages et le tour est joué).
Mais dans ce cas ci, je dois intégrer la taille de ces images en pixels et je ne peux pas l'exprimer en %ages.... donc c'est pas responsive.
Et ça, ça me pose problème.
Auriez vous une solution s'ils vous plait ?

Un tout grand merci !

Voici mes codes (j'ai fais 2 versions):
Version 1:

html
<a id="link" href="peluches.html"><img src="images/lapinou.png" width="320px" height="320px" alt="intitulé"></a>

css
#link:hover ,#link img {
width:320px;
height:320px;
background:url(../images/lapinouHover.png) no-repeat;
display:inline-block;
}

#link img {
vertical-align:top;
}
#link:hover img {
display:none;
}

Version 2:

html
<div id="pref1">
<a href="peluches.html" title="vos préférés"></a>
</div>

css
#pref1 a {
display:block;
background:url(../images/lapinou.png) no-repeat;
height:320px;
width: 320px;
}

#pref1 a:hover {
display:block;
background:url(../images/lapinouHover.png) no-repeat;
}