0

さまざまなデバイスで表示したい div の画像の背景があります。問題は、正しく収まるように画像の高さを指定する必要があることです。さまざまな電話で、さまざまなピクセルで高さを調整する必要があります。たとえば、iPhone では 65px はポートレート モードでは機能しますが、ランドスケープなどでは機能しません。背景画像の 100% をカバーするように div の高さを変更する方法はありますか? ここに私のコードがあります

<style>
    div.testing {
        height: 95px;
        background-image: url(/myimageurl);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    @media screen and (max-width: 320px) {
        /* iphone portrait */
        div.testing {
            height: 65px;
        }
    }
    @media screen and (min-width: 321px) and (max-width: 480px) {
        /* iphone portrait */
        div.testing {
            height: 80px;
        }
    }
   </style>

    <div class="testing">&nbsp;</div>
4

2 に答える 2

1

background-size: cover; を使用できます。

.thing {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

しかし、なぜ背景画像を使用しているのですか? 通常の画像を使用できる場合は、次のようにすることができます。

.thing {
    width: 100%;
    max-width: [your biggest width];
}

.thing img {
    display: inline-block;
    width: 100%;
    height: auto;
}

また

最大幅で考え方を変え、最初は小さな画面から始め、最小幅を使用して大きくすることをお勧めします。

そして、実際には div.testing は必要ありません - .testing だけでかまいません

そして、正当な理由で背景画像を使用している場合... divの作成を調査する必要があります-

.thing { 
    height: 0;
    padding-bottom: 30%; /* play with this */
}

これにより、プロポーションが維持されます...ただし、特定の場合にのみ役立ちます。

実際の画像を含む完全な jsfiddle が役立ちます。

幸運を！

于 2013-06-01T22:43:30.297 に答える
0

背景の div 内に div をネストし、高さを 100% に設定します

于 2013-06-01T22:34:42.193 に答える