[Résolu] Taille des images adaptée à la résolution d'écran

Bonjour !

D'abord merci pour l'aide que j'ai déjà pu trouver ici en consultant des sujets ouverts par d'autres personnes.

Mais là j'en arrive à bloquer sur un problème assez spécifique dont je n'arrive pas à me sortir. Je suis en train de créer un site pour mon groupe, sur lequel je suis en train de mettre de petites icônes pour les réseaux sociaux. J'ai réussi à arrondir la zone dans laquelle apparaissent les images, et à rendre celle-ci plus petite pour s'adapter aux résolutions d'une largeur de 1280px et inférieures. Mon problème maintenant c'est que ayant des images adaptées pour s'afficher dans une zone de 30px de diamètre, ça rend super mal sur du 24px. Comment pourrais-je faire pour que la taille des images s'adapte à celle de la zone ?

Pour l'instant j'ai ça :
Sur la feuille de style :

#rond {
	margin: 3px;
	overflow:hidden;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
        border: white 1px solid;
	box-shadow: 1px 1px 1px white;
	width:30px;
	height:30px;
        padding: 0px 0px 0px 0px;
        float: right;
        text-decoration: none;
}
@media screen and (max-width: 1280px) {
#rond {
	margin: 3px;
	overflow:hidden;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
        border: white 1px solid;
	box-shadow: 1px 1px 1px white;
	width:24px;
	height:24px;
        padding: 0px 0px 0px 0px;
        float: right;
        text-decoration: none;
}

Sur la page concernée :

<a id="rond" href="lien" target="_blank" style="background:url(mail.png) no-repeat 0px 0px;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(bandcamp.png) no-repeat 0px 0px;">&nbsp;</a> 
<a id="rond" href="lien" target="_blank" style="background:url(youtube.png) no-repeat 0px 0px;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(twitter.png) no-repeat 0px 0px;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(facebook.png) no-repeat 0px 0px;">&nbsp;</a>

Modifié par Cinnamon (20 Jul 2014 - 01:07)

Hum en fait j'ai trouvé toute seule. Plutôt que de m'acharner à essayer de modifier ma feuille de style, j'ai modifié le code de la page en ajoutant " background-size:100%;" :

<a id="rond" href="lien" target="_blank" style="background:url(mail.png) no-repeat 0px 0px; background-size:100%;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(bandcamp.png) no-repeat 0px 0px; background-size:100%;">&nbsp;</a> 
<a id="rond" href="lien" target="_blank" style="background:url(youtube.png) no-repeat 0px 0px; background-size:100%;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(twitter.png) no-repeat 0px 0px; background-size:100%;">&nbsp;</a>
<a id="rond" href="lien" target="_blank" style="background:url(facebook.png) no-repeat 0px 0px; background-size:100%;">&nbsp;</a>

Maintenant tout semble nickel.

Bonne soirée !