🔰「画像パーツ」のデザイン設定画面では、「画像の表示形式」から画像を枠内にどう表示させるかを選ぶことが出来ます。

画像の表示形式について

A画像の表示形式には以下の3種類の形式があります。

💡例：横長の画像を縦長の枠に設定するとき

🖼️元画像

🖼️画像全体を表示

・画像の縦横比を維持したまま、画像全体が枠内に収まるように表示します。
・画像全体が必ず表示されます
 

枠の縦横比と画像の縦横比が異なる場合、上下または左右に余白が表示されることがあります

🖼️画像をトリミングして表示

・画像の縦横比を維持したまま、枠全体を余白なく覆うように表示します。
・枠いっぱいに画像を表示できます

枠の比率と画像の比率が異なる場合、画像の上下または左右の一部が表示されなくなります
※「画像が途中で切れている」ように見える場合、多くはこの設定が原因です。

🖼️元のサイズで表示

・画像を枠のサイズに合わせて縦横に引き伸ばして表示します。
・枠いっぱいに画像を表示できます

画像の縦横比が維持されないため、画像が縦長・横長に変形する場合があります

画像が切れてしまう場合の対処方法

設定によっては、画像の一部が表示されない（切れているように見える）場合があります。
画像の一部が表示されない場合は、以下の方法をお試しください。

◾方法1：表示形式を変更する

画像全体を表示したい場合は、表示形式を**「全体を収めて表示」**に変更してください。

◾方法2：画像の比率を調整する

「トリミングして表示」を使用する場合は、表示枠と画像の縦横比を近づけることで、切れる範囲を少なくできます。

例）
・横長の枠 → 横長の画像を使用
・正方形の枠 → 正方形に近い画像を使用

◾方法3：枠サイズを調整する

画像パーツの幅や高さを変更することで、画像の見え方が改善する場合があります。
 

💭よくあるトラブル

😣 画像の上や下が切れてしまう

→ 画像の表示形式が「トリミングして表示」になっている可能性があります。
→ 画像全体を表示したい場合は、「全体を収めて表示」へ変更してください。

😣 画像の左右が切れてしまう

→ 枠の縦横比と画像の縦横比が大きく異なる場合、左右が表示されなくなることがあります。以下の方法をお試しください。

・枠のサイズを調整する
・枠と縦横比の近い画像を使用する
・表示形式を「全体を収めて表示」に変更する

😣 画像が縦長・横長に変形してしまう

→ 表示形式を「枠内に伸縮して表示」に設定している場合は、一度「全体を収めて表示」もしくは「トリミングして表示」に変更してみましょう。

😣 PCでは問題ないのにスマートフォンで画像が切れる

→ スマートフォンでは表示領域が変わるため、枠の比率がPC表示時と変わる場合があります。
そのため、PCでは問題なく表示されていても、スマートフォンでは画像の一部が表示されないことがあります。必要に応じて以下をご確認ください。

・エディタやプレビューでスマートフォン表示にして確認する
・可能であれば枠のサイズ設定を縦長にしてみる
・枠と画像の縦横比が一致している