HTML/CSS

レスポンシブな画像表示

  /

px、%、vw、vh、em、remなどの単位はwidthや heightなどの全てに使えます。
中でもひっかかりやすいvw、vh、％を使って、歪ませない＆レスポンシブな画像表示を考えていきましょう。

目次
  1. vw、vh
  2. %の使い方に注意
  3. 画像を歪ませない方法
  4. max-○○を使ってよりレスポンシブにする

vw、vh

ブラウザのウィンドウサイズを100としたパーセンテージ。
100vw=ウィンドウの幅
100vh=ウィンドウの高さ

vwはwidth専用、vhはheight専用の単位と思われがちですが、どれにでも使えます。
むしろ、
.hoge{
width:100vw
height:50vw
}
と単位を揃えれば、ボックスの縦横比を保ったまま拡大縮小できて便利です。

%の使い方に注意

もととなる基準が違います。

widthでの%

親のコンテンツ幅(padding,borderを含まない)を100とする

heightでの%

親のコンテンツ高(padding,borderを含まない)を100とする
ただし、親に明確なheightが設定されている必要がある

padding,marginでの%

親のコンテンツ幅(padding,borderを含まない)を100とする
上下のpaddingやmarginも、親のコンテンツ幅が基準になる点に注意。

画像を歪ませない方法

デモ

https://blog.picnico.design/sample/gazou-hiritsu.html

（１）縦横比を保って画像全体を表示させる場合

基本的にはimgタグにheightは設定しません。widthのみ指定します(場合によってはheightのみ)。
片方だけ設定し、もう片方をauto(初期値)にしておくことで、比が保たれたまま画像が表示できます。ただし、widthを%やvwで指定していると、大きなPCなどで見たときに画像が大きくなりすぎることがあります。

（２）縦横比を保って画像の一部をトリミングする場合

MVなどで、先程の問題『幅は100vwにしたいんだけど、高さをautoにすると、大きなPCで見たときに高さでかくなりすぎるので縦はトリミングしたい』が発生したとき。

２−１.背景画像にする

div{
width: 100vw;
height:500px; ←親の高さ固定しちゃう（height書かないと潰れる）
background: url(ichigo.jpg) center center/cover;
}

２−２.object-fitを使う

IE非対応。ただしもうIEはサポート終わってるので使っていいと思います。案件次第。

img{
width: 100vw;
height:500px; ←img自体の高さ固定しちゃう
object-fit:cover;
object-position:center center;(デフォルトで中心にくる)
}

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

max-○○を使ってよりレスポンシブにする

先程までのheight500pxだとスマホでは縦長サイズになるので、heightと max-heightを併記するとよい。

width:100vw;
height:400px;
max-height:50vw;
bg:url(パス) center center/cover;

関連記事