Css per pc e smartphone

Come si può vedere, la parte sopra delle immagini-link è giusta per lo smartphone, ma non per un pc, c'è troppo spazio sotto. Devo renderlo giusto anche per pc. Il css giusto per pc è quello commentato.
http://gruppoalveo.it/forum/index.php

Codice HTML:

<div style="width:auto; height:75px; margin-top:20px; margin-bottom:160px;text-align:center;">  <a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106"> <img style="width:150px; height:70px; margin-left:10px;" src="styles/prosilver/theme/images/libri.jpg" alt="Libri" title="I libri del benessere"> </a> <a href="https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM"> <img style="width:160px; height:70px; margin-left:10px;" src="styles/prosilver/theme/images/estrattori.jpg" alt="Estrattori" title="Estrattori di succhi vivi"> </a> <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21"> <img style="width:110px; height:70px; margin-left:10px;" src="styles/prosilver/theme/images/frullatori.jpg" alt="Frullatori" title="Frullatori di ogni genere"> </a> <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21"> <img style="width:110px; height:70px; margin-left:10px;" src="styles/prosilver/theme/images/vaporiere.jpg" alt="Vaporiere" title="Vaporiere di tutti i tipi"> <a> <a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632"> <img style="width:180px; height:70px; margin-left:10px;" src="styles/prosilver/theme/images/bio-shop.jpg" alt="Bio-shop" title="Prodotti biologici"> <a> </div>

Non specificare un'altezza per il div, si adatterà automaticamente al contenuto. E riduci il margine inferiore.

Ora va meglio, ancora una cosa, come mettere l'hover su ogni immagine?

In che senso? Puoi spiegare meglio quale risultato desideri ottenere?

Ho risolto con un img hover opacity.