Adaptatif fond d'image CSS

Question

J'ai une classe de capture d'écran similaire aux captures d'écran trouvées sur dribbble.com, lorsque je passe la souris dessus, j'affiche une icône de lien. Je l'ai fait réagir jusqu'à ce que la partie où mon image de fond (l'icône de lien) reste la même taille et il semble vraiment grand quand je downscale le reste.

Comment puis-je m'assurer que l'image d'arrière-plan de la classe d'icônes de liens diminue également lorsque je réduis le navigateur?

.screenshot .link-icon { 
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%; 
    position: absolute; 
    padding: 8.02139037433155%; 
    border-radius: 100%; 
    position: absolute; 
    z-index: 1; 
    top: 39%; 
    left: 42.25352112676056%; 
} 

J'ai donc besoin de rendre mon image d'arrière-plan sensible. J'espère que je l'ai bien dit?

Answer 1

Vous devez définir la hauteur à cet effet:

.screenshot .link-icon { 
    background: url("../img/icons/link.png") #fff no-repeat 50% 50%; 
    position: absolute; 
    padding: 8.02139037433155%; 
    border-radius: 100%; 
    position: absolute; 
    z-index: 1; 
    top: 39%; 
    left: 42.25352112676056%; 
    height: 1em; 
}