• ベストアンサー

レスポンシブWEBデザインについて

レスポンシブWEBデザインのフルスクリーンスライダーに関して こちらのサイト内デモのフルスクリーンスライダーなのですが http://www.alessioatzeni.com/blog/brushed-template/ スマホ表示にするとフルスクリーン画像が切り取られ中央の一部しか表示されなくなってしまいます。 スマホ用きちんと画像のすべてを表示するにはどこをいじればいいのでしょうか? UIが気に入っているのでぜひこちらのテンプレートを使用したいのですが これだけが難点です。 御教授ください。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

>スマホ用きちんと画像のすべてを表示するには  スマホを横向きにすると・・  背景画像の縦横比(アスペクト比)を変えずに背景を覆う設定にされていると思います。  横長でも縦長--縦や横のいずれが切り取られてもよいような背景画像を選択しましょう。 background-size:をcontainからcoverに変更すると、すべてが表示されるが、上下や左右の何れかが切り取られるでしょう。 100% 100%にすると、伸縮(アスペクト比を変更)して表示されるのでは??

lukeylukey13
質問者

お礼

横向き! ページに入る前に注釈でスマホは横にして見てくださいと書いておけばすべてが解決しそうです。 縦しか考えてませんでした。 ありがとうございます。 ベストアンサーとさせて頂きます。