liens d'image réactifs

Question

J'essaie de rendre un bouton réactif et de l'adapter à la taille du navigateur.

J'ai défini l'image comme image d'arrière-plan sur la balise, mais je n'ai pas semblé obtenir l'effet souhaité.J'utilise maintenant l 'image en ligne avec le code suivant.

< HTML

<section class="desktop">
    <img class="logo" src="styles/css/images/oatbook.png" title="OATBook | Oral Anticoagulant Therapy">
    <a class="downloada" href="#"><img class="downloadimg" src="styles/css/images/download.png" title="OATBook | Oral Anticoagulant Therapy">sadf</a>
        </section><!-- desktop END -->

 a.downloada {
    background: aqua;
    max-width: 63%;
    display: block;
    margin: 0 auto;
    margin-top:10px;
    text-indent: -4000px;
    cursor: pointer;
    }
img.downloadimg {
    max-width: 100%;
    display: block;
    text-indent: -4000px;
    cursor: pointer;
    }

Exemple en direct http://www.oatbook.co.uk/preview/

Le problème est qu'il est actuellement réactif avec la largeur, mais afficher le sprite entier comme la hauteur semble rester le même.

Ouvert à d'autres suggestions de bonnes pratiques

Answer 1

Découvrez les Sprites extensibles (instructions et démo)

Cette méthode permet aux sprites d'être redimensionnés proportionnellement, et ne repose pas sur background-size qui n'est pris en charge que dans les navigateurs plus récents.Pas de javascript, juste du HTML / CSS.

Cela fonctionne en utilisant une image d'espacement proportionnelle à votre sprite.

Answer 2

Fermez la balise <img> en ajoutant une barre oblique avant un crochet de fermeture:

 <img src="styles/css/images/download.png" />
                                           ^