レスポンシブ画像リンク

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/

問題は、現在幅に反応することですが、高さが同じままであるため、スプライト全体を表示することです。

ベストプラクティスの他の提案に開かれています

Answer 1

チェックアウト 伸縮性のあるスプライト （指示とデモ）

この方法により、スプライトを比例してサイズ変更することができ、依存しません background-size これは、新しいブラウザでのみサポートされています。 JavaScriptはありません、HTML/CSSだけです。

スプライトに比例するスペーサー画像を使用して動作します。

Answer 2

それを閉めて <img> 閉鎖角度ブラケットの前にスラッシュを追加してタグを付けます：

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