ヘッダー画像設定の「カバー画像」に関するページです。
目的
スマートフォンやPCでアンケート回答画面を表示した際、設定したカバー画像の一部が見切れる、表示領域の横幅いっぱいに表示されない問題を解消したい。
原因
ヘッダー部分にカバー画像を表示する際、表示領域に対し、中央寄せ、且つ、縦幅いっぱい（スマートフォンの場合は192 px、PCの場合は256 px）になるように画像をリサイズして、表示します。
その際、画像のアスペクト比を保持した状態でリサイズされる為、設定中のカバー画像が縦幅に合わせて拡大・縮小されると、横幅も同じ比率で拡大・縮小されます。
結果、カバー画像を表示する表示領域に対し、横幅が超えた場合は左右が見切れ、超えない場合は左右に余白が生まれることになります。
上記の理由から、カバー画像を設定する際に、デバイスの適正がある画像サイズを意識して、画像を用意する必要があります。
参考
デバイスの適正がある画像サイズ情報と、推奨サイズを用いたアンケート回答画面にて画面表示を行った際の表示例を以下に示します。
デバイスの適正があるカバー画像に関する推奨サイズとアスペクト比
- スマートフォンに最適な画像
-
1024 × 512 px
-
2:1
-
- PCに最適な画像
-
1024 × 256 px
- 4:1
-
表示例
下記の表示例はスマートフォンとPCの適正のある画像を利用した場合となります。
◯ スマートフォンに最適な画像
スマートフォン表示
PC表示
※ 縦幅に揃える為、画面の左右に余白が生まれます。
◯ PCに最適な画像
スマートフォン表示
※ 縦幅に揃える為、画像の左右が見切れて表示されます。
PC表示