1

ボタンをレスポンシブにしてブラウザのサイズに合わせて拡大縮小しようとしています。

タグの背景画像として設定しましたが、期待した効果が得られなかったようです。私は今、次のコードでインラインで画像を使用しています。

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/

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

ベストプラクティスの他の提案を受け入れる

4

2 に答える 2

0

閉じ<img>角かっこの前にスラッシュを追加して、タグを閉じます。

 <img src="styles/css/images/download.png" />
                                           ^
于 2012-01-15T19:29:31.090 に答える
0

Stretchy Spritesをチェックしてください（手順とデモ）

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

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

于 2012-05-31T02:51:52.593 に答える