1

背景画像を取得すると、含まれているものに固定幅を与えるまで、この画像を見ることができないという問題が常にあります。

<div class="picture">
</div>

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
}

これは動作しません。更新してもこのように画像が表示されません。

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
width: 100%;
height: 100%;
}

ピクセルベースの幅と高さを追加した場合にのみ、画像が適切に表示されますが、流体グリッドにはパーセンテージ ベースの値のみが必要です。

これに対する解決策は何ですか？含まれる div のピクセル ベースの幅と高さを持たない背景画像を表示できますか?

ありがとう！

編集:これが私の問題の私のjsfiddleです。px ベースの高さを使用しない限り、画像が表示されません: http://jsfiddle.net/t3YZt/

4

2 に答える 2

1

バックグラウンド コンテナーに幅があることを確認するには、自分でそれを処理する必要があります (高さを (親の) 100% またはその他の固定高さに設定するか、内部の子に応じて自動高さを設定します)。

次に、背景に対して次の操作を行います。

.picture{
    background-size:cover; /* this way */
    background-size:content; /* or this one */
}

...コンテナのサイズに応じて画像を引き伸ばします。

于 2013-11-10T20:07:03.063 に答える