CSS3とjqueryでブラウザ縦横いっぱいに画像を表示する方法 |ブラウザ画面全体に画像を配置したいとき、 横幅はcssで「width:100%」とすればOKですが、 縦幅は、使う画像の縦横比率に左右されてしまいます。 通常はそれでも問題ないのですが、 ブランディングサイトのTOPページなどは、 ファーストビューを画面いっぱいの写真で埋め、 スクロールするとニュースなどのその他のコンテンツが出てくるようにしたい、 といったニーズがあります。 どのようなブラウザサイズでも常に縦横いっぱいに画像を配置するには、 CSS3プロパティとjqueryが使える環境であれば、下記の方法で行えます。 html: <div id='main-visual'> </div> CSS: #main-visual{ width: 100%; height: 100%; background-image: url('表示したい画像'); background-position:c
