6

こんにちは、コンテナー内に 2 つの列のコンテンツがあります。最初の列にはテキストがあり、2 番目の列には背景のスプライト イメージを含むスパンがあります。問題は、画面の解像度が小さくなると、背景のスプライト画像の幅をパーセンテージで指定して、H5 と一緒にパーセンテージの幅で拡大縮小できるようにすることです。これを行う方法はありますか?

h5{
    float:left;
    display:block;
    width:800px;
}

.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -60px -60px;
    float:left;
    display:block;
    width:64px;
}

<div class="container">
 <h5>Title
 </h5>
 <span class="sprite">
 </span>
</div>
4

2 に答える 2

5

あなたの場合、私は単一background-imageの.

MDNから:

background-size CSS プロパティは、背景画像のサイズを指定します。画像のサイズは、固有の比率を維持するために、完全に制限することも、部分的にのみ制限することもできます。

.sprite{
    background-image: url("assets/img/website_sprite_a.png");
    background-position: -30% -30%; //use % instead pixels
    float:left;
    display:block;
    width:64px;
    background-size: 100%; //play with this
}

これも読むべきです：

JSFIddleでこれを少し遊んでみました。ブラウザーのサイズを変更して効果を確認します。

于 2013-01-23T10:01:20.593 に答える
0

1 年近く遅すぎましたが、私は同じことを理解しようとしていましたが、直接的な答えを思いついたり見つけたりすることができませんでした. 複数のアドバイスで少し浮気した後、私はそれを理解しました。これを IE8 でまだテストする機会がなく、IE6/7 を気にするのをやめたので、覚えておいてください。

私が見つけたトリックは、background-position (前述のように、スプライト イメージのパーセンテージを使用)、padding-top (パーセンテージを使用、これはスプライト イメージの合計幅のパーセンテージ)、および background-size: カバー。

jsfiddleで遊んでみてください。

#wrapper {
    position: relative;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
    padding: 50% 0 0 0;
    width: 40%;
}

<div id="wrapper">
    <div class="div"></div>
</div>
于 2013-11-26T15:44:10.917 に答える