html - 响应式图片链接

Question

我正在尝试使按钮响应并缩放到浏览器大小。

我确实将图像设置为标签上的背景图像，但似乎没有达到预期的效果。我现在使用带有以下代码的内联图像。

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

实例 http://www.oatbook.co.uk/preview/

问题是它当前对宽度有响应，但显示整个 Sprite 时高度似乎保持不变。

接受其他最佳实践建议

Answer 1

关闭<img>通过在右尖括号前添加斜杠来标记:

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