Collegamenti dell'immagine reattivi

Question

Sto cercando di rendere un pulsante reattivo e ridimensionare la dimensione del browser.

Ho impostato l'immagine come immagine di sfondo sul tag ma non sembrava avere l'effetto desiderato. Ora sto usando l'immagine in linea con il seguente codice.

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 -->

CSS

 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;
    }

Esempio dal vivo http://www.oatbook.co.uk/preview/

Il problema è attualmente reattivo con la larghezza, ma mostrare l'intero sprite poiché l'altezza sembra rimanere la stessa.

Aperto ad altri suggerimenti delle migliori pratiche

Answer 1

Guardare Sprite elastiche (Istruzioni e demo)

Questo metodo consente di ridimensionare gli sprite in proporzione e non si basa background-size che è supportato solo nei browser più recenti. Nessun JavaScript, solo HTML/CSS.

Funziona usando un'immagine distanziale che è proporzionata allo sprite.

Answer 2

Chiudi il <img> tag aggiungendo una barra prima di una staffa angolare di chiusura:

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