enlaces de imagen receptivos

Question

Estoy tratando de hacer un botón que responda y escalar al tamaño del navegador.

Establecí la imagen como una imagen de fondo en la etiqueta, pero no parecía tener el efecto deseado. Ahora estoy usando la imagen en línea con el siguiente código.

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

Ejemplo http://www.oatbook.co.uk/preview/

El problema es actualmente receptivo con el ancho, pero muestra todo el sprite, ya que la altura parece seguir siendo la misma.

Abierto a otras sugerencias de las mejores prácticas

Answer 1

Verificar Sprites elástico (Instrucciones y demostración)

Este método permite que los sprites se rediculen proporcionalmente y no confíe en background-size que solo es compatible con los navegadores más nuevos. Sin JavaScript, solo HTML/CSS.

Funciona usando una imagen espaciadora que es proporcional a su sprite.

Answer 2

Cierra el <img> Etiqueta agregando un corte antes de un soporte de ángulo de cierre:

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