読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

背景画像とともに要素を伸縮させるには、background-size:containとjsを使う

jQuery レスポンシブWebデザイン CSS3

画像をブラウザウィンドウの横幅に応じて伸縮させる場合、以下の2つの方法があると思います。

  1. img要素のwidth属性を%値にしてheight属性をautoにする。
  2. css3のbackground-size:contain(またはcover);を使う。

1はhtml内に画像を記述する場合、2は装飾としてcssで画像を記述する場合の手法になります。「background-size:contain」はcss3で使えるようになった、とても便利なプロパティの値です。

仕様の詳細は以下サイトで説明されていますが、要約すると、「”要素”の幅に合わせて、画像の縦横比を維持したまま伸縮させる」です。レスポンシブWebデザインなどで、html内に画像を記述したくない場合(装飾として画像を使う場合)に力を発揮します。

伸縮されるのは、あくまで”画像”

ここではまったのが、背景画像が指定されている要素も一緒に伸縮されるものと期待してしまったことです。background-size:containが縦横比を維持しているのは、画像であって要素ではないのです。そこで問題になるのが、”要素の高さ”。

img要素の場合、width属性を%値、height属性をautoにすれば、img要素の横幅に応じて縦横比を維持したまま縦幅が伸縮されます。

しかし、cssで、ある要素のwidthプロパティを%値、heightプロパティをautoにしても、同じようにはいきません。cssでは、heightプロパティに%などの相対値を指定することはできるのですが、これは、親要素にheightの固定値がなければ無効になってしまいます。

positionプロパティを使う方法(divの領域を親要素のめいいっぱいまでpositionで広げるCSSの小技 - あぷすた)もありますが、やはり、親要素にはheightの固定値が必要になります。

”要素”を縦横比維持したまま伸縮させるにはJSを使う

結局、JavaScriptで横幅に応じた高さを算出して、出力するしないってことですね。で、実際に書いたコードが、以下コードの「// 画像の伸縮」とコメントしている箇所です。


「img_height = Math.round(winWidth*15/32);」のような記述がいくつかありますが、この「15/32」が、維持したい要素の縦横比になります。この値を取得した要素の幅に乗算することで、高さを算出しています。cssで縦横比維持したまま高さを伸縮できる日が来るのは、もうちょっと先なのかもしれないですね。。。

なお、ソースに記述しているresizeイベントですが、下記のように、処理の負荷を軽減させる対策をした方が良さそうです(めんどくさがってやりませんでしたが)。