画像関連・その他 画像編集機能や文字装飾など、様々な箇所で使用する機能の使い方や、よくあるお問い合わせ内容への回答です。
home-line
マニュアルトップ » 画像関連・その他 » その他 - 画像の一部が表示されない

画像の一部が表示されない

画像の一部が表示されない
ブロックなどに表示する画像を設定した際、画像の端が切れてしまい、全体が表示されないことがあります。
特に、縦長の画像を設定した際には気付きやすいです。
下の例を見るとわかりますが、左の画像をスライドショーブロックで表示すると、上下が切り取られて表示されてしまいます。
これは縦長の画像だけでなく、横長の画像でも起こる可能性があります。
画像の一部が表示されない原因
画像を表示するブロックでは、画像が表示される領域が決まっています(画面サイズによって変わります)。
レイアウトを崩さないために、その領域からはみ出す場合には、はみ出る部分を非表示にするようになっています。

画像は表示領域を完全に覆うように拡大・縮小されます。
先程の例であれば、縦長の画像は表示領域の横幅に合わせて縮小され、領域からはみ出た上下が非表示となっています。
つまり、表示領域と画像の縦横比が異なる場合は、横長の画像であっても表示領域からはみ出る部分(非表示になる部分)が出てしまいます。
ただ、表示領域は横長になっているものが多く、登録する画像も横長であることが多いため、はみ出る部分が少なく気付きにくい、ということになります。
対策
ブロックによっては縦幅を指定しない(表示領域が縦に伸びて、はみ出るはずだった部分も表示される)設定にできるので、そのように設定します。
また、直接的な解決にはなりませんが、同じブロックに登録する画像は縦長の画像と横長の画像を混ぜず、どちらかに統一して設定するようにします。
可能であれば、縦横比も統一するようにします。
注意点
縦幅を指定しない設定にした場合、特にスライドショーだと登録している画像の縦横比がある程度近くないと、非常に見づらいページになってしまうので注意が必要です。
縦長の画像を表示する時だけスライドショーブロックが下に伸び、スライドショー下のブロックがその分下に押し出されるような形になります。次の画像に切り替わった際にまたブロックが上に縮むことになり、見ているものが一定時間ごとに勝手に上下に移動する、見づらく落ち着かないページになってしまいます。
関連記事