しらぎくのウェブサイト作成入門メモ
しらぎくのウェブサイト作成入門制作者のメモ。

CSS で画像等の高さを解像度に合わせるには

レスポンシヴ・ウェブデザインなどではしばしば埋め込む画像を端末の解像度に合わせて適宜縮小します。

幅の方は簡単なのですが、高さの方は実は余り簡単ではありませんでした。

目次


CSS 第二水準で画像の高さを端末に合わせるには

CSS 第二水準第一改訂版(CSS 2.1)で画像に合わせて画像の表示解像度を変更する場合、max-width プロパティmax-height プロパティを指定する事であらゆる画像解像度に対応出来ます。

問題点

ところが、高さ関係のプロパティでパーセンテージを用いる場合、親要素に具体的な高さが定まっていないといけないのです。

端末の解像度に合わせて高さを定めたいのであれば、最上位要素である<html>要素から<img>要素に至るまでの全ての要素の height プロパティの値を auto でない値にしないと無理でしょう。

当然、その結果他の部分にまで大きな影響を与える事になるでしょう。

CSS 第三水準 数値・単位モジュールで導入された新しい長さの単位

CSS 第三水準(CSS3)の数値・単位モジュールでは、新たにヴューポートの幅や高さに対する比率を指定出来るようになりました。

このうち、vh 単位は、ヴューポートの高さに対する比率となります。

ヴューポートは特にスマートフォン等では<meta name="viewport">要素で具体的な値を指定出来るため、必ずしも端末の実解像度とは一致しません。

でも多くの場合横幅だけを指定する場合が多く、その場合は高さはそれに合わせて設定されるため実質的に画面の高さに対する比率と見なせます。

vh 単位等について注意すべき事

vh 単位等 CSS 第三水準 数値・単位モジュールで導入されたヴューポートの幅や高さに対する比率を使う場合、以下の点に注意しましょう:

取るべき値は百分率

ヴューポートの幅や高さに対する比率の単位で取るべき値は百分率です。

つまり、vh 単位で言えばヴューポートの高さ= 1vh ではなく、ヴューポートの高さ= 100vh となります。

これを忘れると、期待している高さの百分の一の解像度が適用される事となります。

スマートフォンでは要注意!

上記で述べた通り、ヴューポートの解像度は必ずしも端末の実解像度ではありません。

スマートフォン等では<meta name="viewport">要素で具体的なヴューポートの幅や高さを指定出来ます。

そして指定されたヴューポートの解像度が端末の実解像度と一致しない場合は適宜縮小拡大されます。

ヴューポートの縦横比が実解像度の縦横比と異なる場合、恐らく全体を収めるように縮小して余白を作る事になるでしょう。

縦方向に余白が出来た場合は、実解像度とは異なる値となります。

対応していない環境もある

スマートフォンではアンドロイドの 4.x までに未対応のものがあります。

一般に未対応の単位が含まれている場合、その値はエラーとし当該プロパティの指定は無効とみなされます。

それで問題があるか否かは状況次第でしょう。

ご案内。

制作者の創作キャラクタ

創作キャラクタ・堀北真希うさぎ
主な収録作品
紀子ちゃん(神崎紀子)
主な収録作品

しらぎく日記システム 第 0.685版 (平成29年08月15日)