フルスクリーンのサイトについて

Question

webの経験初心者です。
現在知り合いのwebサイトを制作中なのですが
そのトップページを背景に画像をフルスクリーンで表示する仕様のデザインにしようと
思っていまして

一応自分でネットで調べてフルスクリーンでウィンドウいっぱいに画像を貼ることはできました。
しかしウィンドウを最大化すると
意図していたものよりもずいぶんと
ズームインした状態になってしまいました。

この画像をウィンドウを最大化した時に
今よりもズームアウトした状態にするにはどうすればよいのでしょうか？
分かる方よろしくお願いします。

nanden1548 · Accepted Answer

参考になれば・・・

世の中には、さまざまなディスプレイがあります。
それらで、すべて同じようなデザインにすることは、非常に難しいことです。
そのため、一般的に、もっとも仕様の多いディスプレイの最大幅1240px or 960px程度に設定する場合が多いようです。

そこで、最大幅を、1240ｐｘ、あるいは、960pxにした場合、それより狭い表示幅しかないデバイスに対しどのような対策を、しておかなければならないか・・・・・ということになります。

そこで最近では、レスポンシブレイアウトという技法を取り入れたサイトが、多くなっています。
有名なのは、Bootstrapとか、JQueryMobile、Yaml4などです。
検索されると、簡単に見つかると思います。

これらの、Ｆｒａｍｅｗｏｒｋは、グリッドレイアウトと、CSS3のResponsiveLyoutという手法を合わせて制作されています。

このような、Frameworkを利用すると、簡単に制作できると思います。

参考URL：http://twitter.github.com/bootstrap/

wo_moon · Answer

2です。途中で送信してしまいました。

実際に使いたい写真はどんな構図なのか、どんなモニタサイズを想定しているのか、貴方がどんな風に見せたいと思っているのか、それによって最適なcssはまったく違うものになると思います。

画像のトリミングは何をどう見せたいのかによってまったく変わりますから、画像だけ見てもあなたのイメージしているのと私がよいと思うのは違ってしまうでしょうしね。
したがって、今の情報では適切なアドバイスをすることは難しいです。

1の方がおっしゃっているように、いろんなサイズ指定の方法を試して、ご自身がイメージしているのに最も近いものを探すのがよいと思います。

> background-size: contain;
> background-size: cover;
> background-size: 100px 200px;
> background-size: 50%;
この指定の意味するところは参考URLにわかりやすく解説されています。

参考URL：http://dresscording.com/blog/responsive/background-size.html

wo_moon · Answer

画像の縦横比とモニタの縦横比が一致しない所為ではありませんか。

貴方が記述したコードだと、画像のアスペクト比（縦横比）を固定して拡縮します。
つまり
画像がパノラマ写真だったり、あるいはモニタがワイドタイプだったりして、アスペクト比（縦横比）が極端に違う場合、隙間ができないように数値が小さいほうの長さをもう片方に合わせられます。

世の中にはいろんな縦横比のモニタがありますから、すべての条件で思ったとおりに見せるのは難しいです。

naokita · Answer

CSS3の話でしょうか？・・・　試作のソースがないとわかりません。

background-size: contain;
  background-size: cover;
  background-size: 100px 200px;
  background-size: 50%;

一個ずつ試してみましょう。

または、元画像の大きさを作り変える。

参考になれば・・・