2012-04-01 20 views
0

私は、中央に固定幅divを持つウェブサイトを持っています(divはmargin-left:autoを使用して中央揃えされています)。今私はこのdivの左右にいくつかの画像を示したいと思います。画像は、ブラウザウィンドウのスクロールに影響しないはずです。解像度が小さすぎる場合は、ブラウザにスクロールバーを表示せずに画像を切り取る必要があります。しかし、中心のdivのための十分なスペースがない場合は、スクロールバーが表示されます。ブラウザのウィンドウを越えて画像を左右に配置する中央のdiv

これはどのように達成できますか?

編集:左の画像のないサイト/右ここにあります:http://b-sides.ch/openair12/

+0

:あなたがここに

overflow-x:scroll; 

は、すべてのブラウザでサイトの流体とまだ互換性を作るための良い例とサイトで取得するには、ブラウザを伝えるメディアクエリーで サイトでは大いに役立つことはできませんが、 ''または ''に 'overflow-x:hidden'を追加してみてください。 – Bojangles

+0

のウェブサイトはこちら(左/右の画像はありません):http://b-sides.ch/openair12/ –

答えて

0

私は、単一のjpgとしてページ(ボディバックグラウンド)の背景として画像を入れてしまうでしょう。イメージの間のスペースは、中央に配置されたdivの幅と同じにしてください。 しかし、あなたのコードを表示する必要があります。

+0

ありがとう!背景イメージは解決策かもしれません。しかし、中央のdivは1250ピクセル幅なので、これはかなりの帯域幅の浪費になります。サイト(画像がない場合は、http://b-sides.ch/openair12/) –

0

あなたの問題のために、サイト流体を作り始めることをお勧めします。そして、画面が小さくなったときにメディアのクエリを適用して「サイドバー」を取り除きます。任意のコードやへのリンクがないとhttp://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

+0

ありがとうございますが、これが私の場合を解決するとは思いません。画像が完全に画面に収まらない場合は、画像も表示する必要があります(より大きな解像度を満たすために装飾されています)。 –

関連する問題