2012-01-03 20 views
1

画面サイズに関係なく表示したい画像があります。私はPhotoshopでイメージを引っ張ってサイズをレンダリングし(それは元々はベクトルであったため4164 x 2667だった)、いくつかの変更を加えました。バックグラウンドイメージが完全に表示される問題がある

イメージを約1200 x 769に縮小し、PNGとして保存しました。しかし、画像全体がモニタに正しく表示されない - 画面外に伸ばして背景の一部を切り取っているようだ。ここで

元の画像がある:あなたが見ることができます

http://jsbin.com/uyirah/2/edit

enter image description here

、ここでは、私はそれを試して動作するようにjsbinに使用されるコードへのリンクですコードをレンダリングすると画像が完全に表示されません。これを引き起こす可能性のあるアイデアは何ですか?私のCSSは悪いですか?

また、遅延時間を短縮するために最終画像に使用するのに適したサイズはどれですか?

答えて

3

あなたのCSSで背景サイズの「カバー」を指定しています。これは、イメージがある次元でイメージの一部を切り取っても、イメージがバックグラウンドを完全に覆うようにイメージを拡大することを示します。

あなたは画像を背景に、可能な限り完全に同じ大き表示したい場合は、代わりに「カバー」の「含める」してみてください...

+0

いや、私はそのことについて考えた - しかし私は、バックグラウンドの最小化を含んで使用している場合私は画面を最小限に抑え、大きなモニタでは画面全体に広がらないでしょう(モニタのサイズが画像のサイズを超えている場合) – user686327

+0

:)うん、そうです。あなたがしたい行動は何ですか?画面と背景画像のアスペクト比に不一致がある場合は、背景画像が画面に表示される3つの方法があります:画像が歪んでいる(両方の寸法が画面を正確に満たしているか、画像が伸びている画面は完全に塗りつぶされますが、画像の一部が切り取られたり、画像が引き伸ばされて切り取られることはありませんが、画面の一部は覆われません。 – elijah

+0

画像全体画面全体を覆い隠すにはどうすればいいですか?それともできないのですか?:p – user686327

関連する問題