【CSS】 画像のアスペクト比を維持して表示するには
ここでは、画像を枠内に収めたい、全体を覆うように表示したい、アスペクト比を指定して高さか幅を設定したいなど、様々な画像表示の調整をしていきます。
また、画像の上に文字を重ねるということもしてみます。
目次
表示サイズの調整
枠に画像を表示したい場合、CSSでobject-fitを指定することで様々なパターンを利用できます。
See the Pen css object-fit by Totori (@souki202) on CodePen.
上の例では、すべての画像にwidth: 100%; height: 100%;を付与しています。また、元の画像の大きさは512×256です。
それぞれのobject-fitの意味は、
| 値 | 意味 |
|---|---|
fill | 枠内ピッタリに伸縮されます |
cover | 枠全体をちょうど覆うように、アスペクト比を固定したまま拡大縮小されます |
contain | 枠内でできるだけ大きく画像全体が見えるように、アスペクト比を固定したまま拡大縮小されます |
none | 画像はそのままのサイズで表示されます。 |
scale-down | 枠内に画像全体が収まるように、アスペクト比を固定したまま縮小されます |
containは、枠より小さい場合は拡大されますが、scale-downはそのままです。つまり、scale-downは枠より画像が小さければnoneが、大きければcontainの挙動になります。
cover等の位置調整
上の例だと、必ず画像中央が枠の中央に来るように表示されます。しかし、上寄せにしたい、右寄せにしたいなどあると思います。
その場合、object-positionを利用します。
See the Pen css object-position by Totori (@souki202) on CodePen.
値は、左からの位置(1つ目の値)と、上からの位置(2つ目の値)を指定します。初期値は50% 50%で、これは中央表示です。
left, rightは左右寄せ、top, bottomは上下寄せですね。
パーセントでの指定は、0%で左か上寄せ、100%で右か下寄せになります。
0~100%以外、またはピクセル数などで画面外にはみ出させることも可能です。
アスペクト比を固定したまま切り取り
これは、幅か高さを固定したまま、もう一方の大きさを自動で調整したい場合です。
アスペクト比を維持したまま表示するために、今までは幅と高さを頑張って計算したり、高さを固定にするために幅をデバイスの表示幅に関係なく完全固定したりなどで対応しましたが、もうその必要はありません。
aspect-ratioというプロパティを使用します。
See the Pen css aspect-ratio by Totori (@souki202) on CodePen.
aspect-ratioを指定したおかげで、heightが自動的に計算されています。レスポンシブデザインではしばしば幅が可変になるため、このように高さを自動計算させることは重要です。
このプロパティの値は、例えばアスペクト比が4:3の場合、aspect-ratio: 4/3のように書きます。
aspect-ratioは、画像以外に対しても利用できます。ここで紹介したのは、なにかのアスペクト比を固定して表示という場面は圧倒的に画像が多いためです。
画像の下の微妙な隙間
ページ作成時にしばしば問題となるのが、画像の下に微妙なスペースができるパターンです。
See the Pen css image space by Totori (@souki202) on CodePen.
微妙なスペースができていますね。これの解決は使いやすいもので2種類あります。
隙間ができる原因
そもそも、画像はインライン要素です。英字では、gやjなど、下にはみ出る文字がありますよね。画像も文字のような感覚で扱われてしまうため、このはみ出る分が画像表示に影響してしまいます。
ブロック要素にする
インラインとして文字と混ざって表示されるのが原因なので、ブロックにすることでその影響はなくなります。
See the Pen css image space block by Totori (@souki202) on CodePen.
上下中央揃えにする
デフォルトでは、文字はbaselineに合わされます。baselineは、下にはみ出る文字以外の文字の高さに合わせる、というものです。
img要素がインラインであるために、他の文字と同じように下にはみ出るものかもしれない、という前提で処理されてしまうということです。
そこで、高さの位置揃えを中央とすることで、その心配がないようにします。
See the Pen css image space align by Totori (@souki202) on CodePen.
この方法の場合、同じ行の文字まで上下中央揃えになる場合があるため、注意が必要です。
まとめ
画像は様々なサイズ調整方法で表示できます。無理に画像のサイズを調整したり、切り取ったりという必要は近年では必要ありません。
これらの表示方法は、レスポンシブデザインには必要不可欠です。モダンなWebページ開発のために把握しておきましょう!
